详解webpack-dev-server的简单使用

最新推荐文章于 2024-02-13 14:16:20 发布

VIP文章前端可乐老师

最新推荐文章于 2024-02-13 14:16:20 发布

阅读量4.6k

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/weixin_44526331/article/details/86515472

版权

webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.

我们来看一下下面的配置文件(webpack.config.js)

var path = require("path");
module.exports = {
 entry:{
 app:["./app/main.js"]
 },
 output:{
 path:path.resolve(__dirname,"build"),
 publicPath:"/assets/",
 filename:"bundle.js"
}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：619586920
}

这里你将你的源文件放在app文件夹下,并通过webpack将其打包到build文件夹下的bundle.js中.
注意:webpack-dev-server是一个独立的NPM包,你可以通过npm install webpack-dev-server来安装它.

基本目录

webpack-dev-server默认会以当前目录为基本目录,除非你制定它.

webpack-dev-server --content-base build/

上述命令是在命令行中执行的,它将build目录作为根目录.有一点需要注意的是:webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中.
我们在基本目录下新建一个index.html文件,然后在浏览器中输入http://localhost:8080访问.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document<

最低0.47元/天解锁文章

前端可乐老师

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
详解webpack-dev-server的简单使用

webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.我们来看一下下面的配置文件(webpack.config.js)var path = require("path");module.exports = { en...
复制链接

扫一扫