官方解释

  1. npm install --save-dev webpack-dev-server

webpack-dev-server 能够用于快速开发应用程序。

http://site.damobing.com/webpack/2%E9%85%8D%E7%BD%AE/2-6DevServer.html 提高开发效率的 DevServer ，它提供了一些配置项可以改变 DevServer 的默认行为。

属性介绍

1. hot

http://site.damobing.com/webpack/2%E9%85%8D%E7%BD%AE/2-6DevServer.html DevServer 默认的行为是在发现源代码被更新后会通过自动刷新整个页面来做到实时预览，开启模块热替换功能后将在不刷新整个页面的情况下通过用新模块替换老模块来做到实时预览。

2. inline

在 dev-server 的两种不同模式之间切换。默认情况下，应用程序启用内联模式(inline mode)。这意味着一段处理实时重载的脚本被插入到你的包(bundle)中，并且构建消息将会出现在浏览器控制台。

• 如果开启 inline，DevServer 会在构建完变化后的代码时通过代理客户端控制网页刷新。 • 如果关闭 inline，DevServer 将无法直接控制要开发的网页。这时它会通过 iframe 的方式去运行要开发的网页，当构建完变化后的代码时通过刷新 iframe 来实现实时预览。

  1. const { merge } = require('webpack-merge');
  2. const common = require('./webpack.common.js');
  4. module.exports = merge(common, {
  5.   devtool: 'inline-source-map',
  6.   devServer: {
  7.     contentBase: '../dist',
  8.     hot: true,
  9.     inline: false,
  10.     proxy: {
  11.       '/api': 'http://localhost:3000'
  12.     }
  13.    },
  14. });


此时页面不会自动刷新，而是需要手动刷新也买呢才会刷新页面。

3. contentBase

告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。devServer.publicPath 将用于确定应该从哪里提供 bundle，并且此选项优先。


contentBase主要是指定静态资源的根目录的，意思就是不受webpack控制的资源文件。如果涉及到了非webpack受控的资源文件就需要指定这个contentBase字段了。

4. headers

在所有响应中添加首部内容

  1. module.exports = merge(common, {
  2.   devtool: 'inline-source-map',
  3.   devServer: {
  4.     contentBase: './dist1',
  5.     hot: true,
  6.     inline: true,
  7.     headers: {
  8.       'X-foo':'bar'
  9.     },
  10.     proxy: {
  11.       '/api': 'http://localhost:3000'
  12.     }
  13.    },
  14. });

5. host

指定使用一个 host。默认是 localhost，也可以在启动 DevServer 时带上 —host 0.0.0.0。如果你希望服务器外部可访问，指定如下：

  1.    host: "0.0.0.0",

6. port

指定要监听请求的端口号：默认使用 8080 端口。 如果 8080 端口已经被其它程序占有就使用 8081，如果 8081 还是被占用就使用 8082，以此类推。

  1. port: 8081,

7. disableHostCheck

http://site.damobing.com/webpack/2%E9%85%8D%E7%BD%AE/2-6DevServer.html devServer.disableHostCheck 配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。 DevServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求。 它通常用于搭配 —host 0.0.0.0 使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。

  1.     host: "0.0.0.0",
  2.     disableHostCheck: true,

8. https

DevServer 默认使用 HTTP 协议服务，它也能通过 HTTPS 协议服务。

  1.     https: true,

以上设置使用了自签名证书，但是你可以提供自己的，配置如下：

  1. https: {
  2.   key: fs.readFileSync("/path/to/server.key"),
  3.   cert: fs.readFileSync("/path/to/server.crt"),
  4.   ca: fs.readFileSync("/path/to/ca.pem"),
  5. }

9. clientLogLevel

http://site.damobing.com/webpack/2%E9%85%8D%E7%BD%AE/2-6DevServer.html devServer.clientLogLevel 配置在客户端的日志等级，这会影响到你在浏览器开发者工具控制台里看到的日志内容。 clientLogLevel 是枚举类型，可取如下之一的值 none | error | warning | info。 默认为 info 级别，即输出所有类型的日志，设置成 none 可以不输出任何日志。

  1.     clientLogLevel: 'none',

10. compress

一切服务都启用gzip 压缩：

  1.     compress: true,

11. open

devServer.open 用于在 DevServer 启动且第一次构建完时自动用你系统上默认的浏览器去打开要开发的网页。 同时还提供 devServer.openPage 配置项用于打开指定 URL 的网页。

12. proxy

如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。

  1. proxy: {
  2.   "/api": {
  3.     target: "http://localhost:3000",
  4.     pathRewrite: {"^/api" : ""}
  5.   }
  6. }

有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。
在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径，来跳过代理请求。
例如：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理。你可以这样做：

  1. proxy: {
  2.   "/api": {
  3.     target: "http://localhost:3000",
  4.     bypass: function(req, res, proxyOptions) {
  5.       if (req.headers.accept.indexOf("html") !== -1) {
  6.         console.log("Skipping proxy for browser request.");
  7.         return "/index.html";
  8.       }
  9.     }
  10.   }
  11. }

如果是多个地址，代理到同一个后台服务。

  1. proxy: [{
  2.   context: ["/auth", "/api"],
  3.   target: "http://localhost:3000",
  4. }]

官网地址：https://www.webpackjs.com/configuration/dev-server/#devserver-proxy
https://www.webpackjs.com/configuration/dev-server/#devserver-proxy

Demo地址

https://github.com/rodchen-king/wepack-learn/commit/8efd98f89a0ee1ffb4e9806ab96581c5b542ccd3