webpack实例解析三（devServer）

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

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

效果：
资讯执行 npm run dev 或 yarn dev
可以看到

图片地址
图片：

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

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

修改button的文本
保存，发现

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

文件下载：
链接：https://pan.baidu.com/s/1zmI8AW_ycEe0qoZyRvutHw
提取码：n74n