webpack实时打包
目标:实现实时打包预览效果。当我们修改了代码时,立即运行打包命令,并显示效果。
工具:[webpack-dev-server]
注意
:
-
项目开发都是对src目录内部的文件进行更新,不要去修改dist打包好的文件
-
现在对src内部的任何文件做修改操作后,都需要重新打包,才可以看到对应效果
步骤:
- 安装
npm i webpack-dev-server -D
-------------------------------
+ webpack-dev-server@3.11.0
added 395 packages from 272 contributors in 62.727s
-
在webpack.config.js中做如下配置
module.exports = { // 配置 webpack-dev-server的选项 devServer: { host: '127.0.0.1', // 配置启动ip地址 port: 10088, // 配置端口 open: true // 配置是否自动打开浏览器 } // 其它配置 }
-
在package.json中补充一个script
"scripts": { + "dev":"webpack-dev-server", "build_dev": "webpack --config webpack.config123.js index.js", "build": "webpack ", "test": "echo \"Error: no test specified\" && exit 1" },
-
启动命令
现在通过
npm run dev
就可以实现 实时打包、实时编译、实时浏览器查看效果了。它会自动打开一个浏览器窗口。 -
测试
- 修改.js代码,
- 修改.css代码,检查是否会重启
注意:
浏览器看到的实时效果是服务器通过“内存
”提供的,没有物理文件,也不会生成dist目录