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