一.问题描述
在webpack4.x - 创建项目,打包第一个js文件这篇文章中,我们成功利用webpack实现了项目中js文件的打包操作,但是细心的同学可能发现了我们每一次修改相关代码,都要通过npm run build
命令重新打包我们的bundle.js
文件,这样我们才能看到效果,因此webpack-dev-server应运而生;
二.配置webpack-dev-server
2.1 修改webpack.config.js
/**
* Created by Milogenius on 2020/1/5.
*/
const path = require('path')
let config = {
mode: 'none',
entry: {
main: path.join(__dirname, './src/main.js')
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, './dist')
},
// 开启devServer
devServer: {
open: true,//自动打开浏览器
port: 3306,//运行端口号
contentBase: 'src',//托管目录
hot: true//启用热更新
}
}
module.exports = config
2.2 修改package.json
"scripts": {
"build": "webpack --config webpack.config.js --progress --colors",
//新增
"dev": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
三.安装webpack-dev-server
npm i webpack-dev-server -D
四.测试
我们运行npm run dev
显示成功编译,并且我们的项目已经被托管到web服务,可以通过http://localhost:8081访问,说明我们安装成功,接下来我们修改main.js
,保存修改时候,控制台会显示再次编译;如果我们向结束自动编译,可以ctrl+c
终止即可;
现在,我们访问http://localhost:8081,成功进入页面。点击进入src,发现页面并不是我们想要的效果;
其实,通过webpack-dev-server
编译的bundle.js
文件默认在项目根路径下,而不是我们之前配置的dist目录下;修改index.html
的引入路径;
<script src="../bundle.js"></script>
再次访问,发现正常显示,但是我们并没有在上图中发现bundle.js
文件。因为默认编译完的文件会放到内存中,并没有写入到硬盘中,所以我们看不到;
五.小结
本篇文章我们主要讲如何集成webpack-dev-server,关于更多用法大家可以参考官网