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

文章首发于个人github及我的博客，github请看https://github.com/huruji/blo...，转载请注明出处。

咱们都知道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中文文档