webpack实例解析三（devServer）

港控/mmm° 2021-10-01 01:12 445阅读 0赞

webpack的devServer，给我们提供了一个本地的node服务器，用于开发模式下调试我们的应用.

webpack-dev-server模块启动之后把我们的代码打包到node服务器，提供了热更新，后端代理，自动启动浏览器等实用功能。

webpack-dev-server的配置支持两种形式：  
1，直接在package.json 的 script 命令后面配置、直接控制台 webpack-dev-server --progress  
eg:

"scripts": {
              "build": "webpack",
              "dev": "webpack-dev-server  --progress"
            },

2，在 webpack.config.js 的 devServer 下面配置  
常用的配置如下：=> 注意看注释

devServer: {
                  noInfo: true,// 不在cmd/编译器的控制台打印打包的信息，有警告、错误还是会爆出来
                  compress: true, // 启用gzip 压缩：
                  host: "0.0.0.0",// 默认localhost
                  port: 9000, // 端口
                  publicPath: "/",
                  hot: true,// 启用热替换
                  inline: true,
                  proxy: { // 代理 基于http-proxy-middleware
                    "/api": {
                      target: "http://192.168.152.55:6666",
                      pathRewrite: { "^/api": "" }
                    }
                  },
                  // https: true,// 启用https服务器 默认http （会被浏览器拦截，可以在浏览器开启）
                  open: true,//自动打开浏览器
                  // openPage: 'http://localhost:9000', // 浏览器默认打开的页面
                  useLocalIp: true, // 使用本地Ip打开页面
                  overlay: true,// 编译发生错误时在浏览器窗口提示
                  after () { // 提供在服务器内部所有其他中间件之后执行自定义中间件的能力
                    console.log('\n 你的服务已启动： http://localhost:9000 \n Ctrl+C 结束')
                  }
                },

官方详细文档：  
[https://www.webpackjs.com/configuration/dev-server/\#devserver][https_www.webpackjs.com_configuration_dev-server_devserver]

注意：1的方式比2优先级高，也就是说  
eg:  
@1 “dev”: “webpack-dev-server --open”  
@2 \{  
…  
open: false,  
\}  
总是会打开浏览器

效果：  
资讯执行 npm run dev 或 yarn dev  
可以看到  
![在这里插入图片描述][20190810170442484.jpg]  
图片地址![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]  
图片：

var img = new Image()
      img.src = '/api/upload/captcha?t=' + Math.random()

验证码出来了，说明proxy代理成功

修改button的文本  
保存，发现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 2]

自动打包，浏览器自动刷新成功

文件下载：  
链接：[https://pan.baidu.com/s/1zmI8AW\_ycEe0qoZyRvutHw][https_pan.baidu.com_s_1zmI8AW_ycEe0qoZyRvutHw]  
提取码：n74n

[https_www.webpackjs.com_configuration_dev-server_devserver]: https://www.webpackjs.com/configuration/dev-server/#devserver
[20190810170442484.jpg]: /images/20210812/3b1e98a49eb44766a96c4d409fb6564c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210812/07a9454130b947beb4bd8ee7ab6a9b60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]: /images/20210812/ba282a3f533343c795e4d23d2a8547bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 2]: /images/20210812/ad03f13d44874d92bfec80195f8b4a80.png
[https_pan.baidu.com_s_1zmI8AW_ycEe0qoZyRvutHw]: https://pan.baidu.com/s/1zmI8AW_ycEe0qoZyRvutHw