05

目标

能使用webpack实现实时打包预览效果

webpack实时打包

目标：实现实时打包预览效果。当我们修改了代码时，立即运行打包命令，并显示效果。

工具：[webpack-dev-server]

npm官网配置手册

注意：

项目开发都是对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", },

启动命令

现在通过 npm run dev就可以实现 实时打包、实时编译、实时浏览器查看效果了。它会自动打开一个浏览器窗口。

如果报错了，可能原因之一是：webpack,webpack-cli的版本（太高了）与当前的webpack-dev-server的版本不一致。你需要去设置一下webpack，webpack-cli的版本（不要用最新的）

做法是：

找到package.json中的webpack,webpack-cli的设置，修改它们的版本号是: "webpack": "^4.44.2", "webpack-cli": "^3.3.12",

2 . 运行 npm i，它会根据你的当前的改动去下载对应版本的webpack和webpack-cli。

测试

修改.js代码，修改.css代码，检查是否会重启

注意：

浏览器看到的实时效果是服务器通过“内存”提供的，没有物理文件，也不会生成dist目录