使用webpack-dev-server 插件可以让 webpack 监听项目源代码的变化,从而进行自动打包构建。
1、安装 webpack-dev-server
从项目根目录转到cmd运行如下命令,即可在项目中安装此插件
npm install webpack-dev-server@3.11.2 -D
2、配置 webpack-dev-server
2.1、修改 package.json -> scripts 中的 dev 命令如下:
2.2、运行 npm run dev 命令,重新进行项目的打包,出现错误
[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
解决方案:
执行命令:npm install webpack-cli --save-dev
再次运行 npm run dev 命令
成功解决!
3、在浏览器中访问 http://localhost:8080 地址,查看自动打包效果
注意:webpack-dev-server 会启动一个实时打包的 http 服务器