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 中文文档