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

[huruji]

我们都知道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"
  },

参考：webpack中文文档