[网络协议]webpack-dev-server的部分配置项

devServer:{...}

? ? ? ? 主要的配置对象。

devServer.contentBase(boolean string array)

? ? ? ? 需要服务的文件夹，false为不启用服务。

devServer.host(string)

? ? ? ? 指定使用的ip地址，默认为localhost，如果使用'0.0.0.0'则可以被外部访问。

devServer.hot(boolean)

? ? ? ? 是否开启HMR（Hot Module Replacement）。

devServer.hotOnly(boolean)

????????启用HMR，当编译失败时，不刷新页面。

devServer.port(number)

????????指定服务监听的端口号。

devServer.open(boolean)

? ? ? ? 是否自动打开浏览器。

devServer.compress(boolean 类型)

? ? ? ? 是否对所有请求启用gzip压缩。

devServer.http2(boolean)

? ? ? ? 是否开启HTTP/2。

devServer.https(boolean object)

????????默认情况下dev-server使用http协议，通过配置可以支持https。

module.exports = {
  devServer: {
    https: {
      cacert: './server.pem',
      pfx: './server.pfx',
      key: './server.key',
      cert: './server.crt',
      passphrase: 'webpack-dev-server',
      requestCert: true,
    },
  },
};

devServer.headers(function,object)

????????为所有响应添加 headers。

devServer.overlay(boolean object)

????????在浏览器上全屏显示编译的errors或warnings。
????????默认是关闭的。如果只想显示编译错误。则如下配置

overlay: true

????????如果既想显示erros也想显示warnings，则如下配置

overlay: {
    warnings: true,
    errors:true
}

devServer.proxy(object)

????????未来保证在同一域名下，请求一些在其他域名下的api接口时会用到该配置。
????????dev-server使用http-proxy-middleware包。
????????当服务运行于localhost:3000时，可以使用如下配置启用代理。

proxy: {
  "/api": "http://localhost:3000"
}

????????对/api/users的请求将会通过代理请求到http://localhost:3000/api/users.
如果不想将/api传递过去，需要重写path:

proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""}
  }
}

????????默认情况下如果请求的服务是https的，并且证书是未认证的的，则该错未认证证书默认是无法使用的。如果想要使用该证书。则需要进行如下配置，关闭安全检测。

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
  }
}

????????有时，不希望代理所有请求，可以像bypass属性传递一个function来实现该需求。
????????在function中，可以获取到request，response以及proxy options。
????????该function必须返回false或返回被部署的文件路径，而不是继续去代理请求。

????????例子，对于浏览器的请求，只希望提供html网页的访问，而对于api请求，
则将请求代理到指定服务。

proxy: {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  }
}

devServer.quiet(boolean)

????????当启用该配置，除了初始化信息会被写到console中，其他任何信息都不会被写进去。
errors和warnings也不会被写到console中。

devServer.static(boolean,string,object)

????????该配置项允许配置从目录提供静态文件的选项（默认是 'public' 文件夹）。将其设置为?false?以禁用。

module.exports = {
  // ...
  devServer: {
    static: ['assets', 'css'],
  },
};

说明

? ? ? ? 以上为webpack-dev-server的部分配置项，更多更详细的配置项和配置说明请查看官网。

? ? ? ? 点击进入官网文档 --->?DevServer | webpack 中文文档