webpack5-实时打包

webpack实时打包

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

工具：[webpack-dev-server]

• npm官网
• 配置手册

注意：

• 项目开发都是对src目录内部的文件进行更新，不要去修改dist打包好的文件

• 现在对src内部的任何文件做修改操作后，都需要重新打包，才可以看到对应效果

步骤：

1. 安装

npm i webpack-dev-server  -D
-------------------------------
+ webpack-dev-server@3.11.0
added 395 packages from 272 contributors in 62.727s

2. 在webpack.config.js中做如下配置

   module.exports = {
       // 配置 webpack-dev-server的选项
       devServer: {
           host: '127.0.0.1',  // 配置启动ip地址
           port: 10088,  // 配置端口
           open: true  // 配置是否自动打开浏览器
       }
       // 其它配置
   }
   

3. 在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"
     },
   

4. 启动命令

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

5. 测试

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

注意：

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