Webpack 系列 关于 Webpack-dev-server 配置的点点滴滴

Question

我们都知道 webpack-dev-server 为我们在开发的时候提供了一个服务器以便于我们的开发，我们在使用之前当然需要安装：

npm i webpack webpack-dev-server -D

安装完成之后我们只需要在 webpack 配置中配置 devServer 选项即可，以下是一个简单的配置：

const path = require('path');
const webpack = require('webpack');

const config = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

module.exports = config;

这里指定 webpack-dev-server 所做的事情就是以 dist 文件夹为开启服务器的文件夹位置，并使用热更新。这篇文章中所有演示内容也将以这个配置为基础。上面的 webpack-dev-server 中指定了 contentBase 和 hot 为我们做了我们的任务，那么除了这两个配置选项，webpac-dev-server 还有那些配置选项呢？
我将 webpack-dev-server 中的配置选项进行简单分类，总结如下：

和访问地址有关

port：指定服务器的端口号，webpack-dev-server 默认的端口号是 8080
host：指定 host，默认为 losthost，当然指定此项大多数情况下是为了这个服务可以被外部服务访问，这种情况之下，你最好应该确保你的服务运行在 DNS 解析的域名 IP 一致
https：webpack-dev-server 默认以http形式开启服务，如果需要指定允许 https，应该在这个选项中指定相应的 HTTPS 证书

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

proxy：设置代理，如果我们在开发的时候需要使用到一个后端开发服务器，而却希望能够在同一个域名下访问，这通常会使用在前后端同时开发时，前端需要使用后端 API 时，这点类似于 Nginx 的 proxy 选项。
webpack-dev-server 使用的是 http-proxy-middleware 这个包，配置的选项与其一致。

和服务器对外输出有关

compress：对所有服务启用 gzip 压缩
contentBase：静态文件的文件夹地址，默认为当前文件夹
headers：在所有的响应中提供首部内容

headers: {
  "X-Custom-Foo": "bar"
}

historyApiFallback：指定相应的请求应该被指定的页面替代，如果 404 页面需要全部替代为 index.html，则声明为 true 即可，其他情况则需要使用 rewrites 来重写 404：

historyApiFallback:true

rewrites:

historyApiFallback: {
  rewrites: [
    { from: /^/$/, to: '/views/landing.html' },
    { from: /^/subpage/, to: '/views/subpage.html' },
    { from: /./, to: '/views/404.html' }
  ]
}

openPage：指定打开浏览器时跳转到的页面

和开发体验相关

color：使用颜色，有利于找出关键信息，只能在控制台中使用
hot：启用热替换属性
info：在控制台输出信息，默认输出
open：运行命令之后自动打开浏览器
progress：将运行进度输出到控制台，只可以使用控制台

最佳编写实践

以上的命令大部分在大部分情况下只会用到很少一部分，并且以上的很多命令都是可以在配置中声明或者在控制台声明的，推荐和开发体验相关的，如 hot、open、progress、color 等通过命令行来写，并且写在 package.json 中
如：

"scripts": {
    "dev": "webpack-dev-server --open --hot --colors --progress --inline --config webpack.dev.js"
  },