Webpack 5 走起! - devServe(5) - webpack-dev-server

前言

前面使用了一些還滿好用的插件，接下來也要加入另一個好用的功能，也就是我們開發常用的模擬伺服器。

webpack-dev-server

webpack-dev-server 這個功能簡單來講就是當我們輸入 npm run dev 完畢之後，它會自動開啟一個瀏覽器以便我們即時看到畫面上的修改與變化，如果沒有這個東西的存在，我想我們每次編譯之後都要開另一個視窗來使用模擬伺服器開啟，可以說是相當的麻煩，因此這邊就依照官方網站的說明來安裝即可

npm install webpack-dev-server --save-dev

接下來這邊設置就比較特別一點了，它並不是屬於插件的一種，因此並不會在 plugins 屬性中設置，而是直接新增一個 devServer 的屬性

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[contenthash:6].bundle.js',
  },
  devServer: {
    publicPath: '.'
    contentBase: path.resolve(__dirname, './dist'),
    port: 3000,
    compress: true,
    open: true,
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack 5',
      template: path.resolve(__dirname, './src/template/index.html'),
      filename: 'index.[contenthash:6].html',
      inject: 'body',
    }),
    new CleanWebpackPlugin(),
  ]
};

這邊稍微介紹一下上方 devServer 屬性的用途。

首先是 contentBase，contentBase 顧名思義就是要打開模擬伺服器的檔案路徑，而在此因為我們編譯後的資料夾是 dist，因此就直接寫 path.resolve(__dirname, './dist') 即可

port 屬性簡單來講就是我們開發時「：」後面所帶的數字，比較常見的有 4000、3000、8080、8000 等，這邊是可以自己決定用哪一個的，如果是以 Vue Cli 的來講則是 8080。

compress 主要是將我們所有的檔案壓縮變成 .gzip 的檔案，這樣子在我開啟瀏覽器時的速度就會比較快速，當然因為會有壓縮這個行為，所以就會吃一些資源囉~

open 這個屬性就是當你執行模擬伺服器時是否要自動開啟瀏覽器的意思，其中官方網站也有說明另一種開啟方式，就是指定瀏覽器開啟 open: 'Google Chrome',，但基本上走預設瀏覽器就可以了。

hot 又稱之為 HMR (Hot Module Replacement)，透過啟用這個屬性，當我們修改 src 底下的資源時，也會同時更新模擬伺服器。

那麼我們該如何啟用這個模擬伺服器呢？依照官方指令我們是必須輸入 webpack serve 的，而在此我們就直接修改 package.json 原有的 dev 指令即可

"dev": "webpack serve"

接下來只需要輸入 npm run dev 就可以開啟模擬伺服器了。

但是這邊會發生一點怪狀況，就是不管你怎麼開都是空白畫面，其實這個原因在於我們編譯 index.html 時重新命名使用了 hash 的關係，預設瀏覽器只會找 index.html 當作首頁，因此這邊要稍微調整一下 HtmlWebpackPlugin 的 filename 就可以囉（改成：「filename: 'index.html',」）。

參考文獻

• webpack-dev-server
• devServer