手把手深入理解 webpack dev middleware 原理與相關 plugins

本文將對 webpack 周邊的 middleware 與 plugin 套件等作些介紹，若您對於 webpack 還不了解可以參考這篇彙整的翻譯。

webpack dev server 是什麼?

webpack dev server 是一個開發伺服器，內建 webpack 使用的 live reloading 功能。

那 webpack dev middleware 是啥?

它就是一個用來組織包裝 webpack 使其可以變成中介軟體，或稱中間件的容器。回想一下 express 你大概可以明白關於 middleware 的用途，就是在輸入到輸出的過程中 加工 的一種手段。單純說 middleware 的話我們可以想成一系列任務, 動作(actions stack)，不只 express 有，在 Ruby 中的 rake 也具備這種機制。

先看看web dev server的說明

The webpack-dev-server is a little node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle.

從頭說起的話就是 webpack 本身只負責打包編譯的功能 bundle, webpack-dev-server 當然就是協助我們開發的伺服器，這個伺服器底層是靠 express 來實作的，接著思考一下我們要如何更新(live reload)呢? 當然是需要取得 webpack 編好的資料啊，於是就需要在從 request 到 response 的過程中透過 express 的 middleware 取得資料，而方法就是透過 webpack-dev-middleware 。

比起直接編譯成檔案，webpack-dev-middleware 這個套件還多了一些好處:

• 不需要一直寫入磁碟，所有產生的結果會直接存在記憶體

• 在監視模式(watch mode)下如果檔案發生異動，middleware 會馬上停止提供舊版的 bundle 並且會延遲請求的回應直到編譯完成，如此一來我們就不需要去觀察編譯是否結束了

webpack hot middleware 是什麼?

我們都知道 webpack dev server 有提供一種Hot Module Replacement/Hot Reloading 熱替換的功能。在一般 webpack-dev-server 的時候我們會在 webpack.config.js 加入 new webpack.HotModuleReplacementPlugin() 或設定來啟用。

而 webpack hot middleware 是給 webpack-dev-middleware 用的。就是讓我們在一般的 server 上加上熱替換的功能，總結來說就是 webpack-dev-middleware + webpack-hot-middleware 即可讓我們用 express 客製一個有熱替換功能的 webpack 開發伺服器。

使用 webpack-dev-server 當中介軟體

webpack 提供了 express 的 middleware 讓我們可以處理一些靜態資源檔而不是使用 express.static。要達成這項功能，我們需要安裝 webpack-dev-middleware 和 webpack-hot-middleware

$ npm i webpack express webpack-dev-middleware webpack-hot-middleware -D

安裝完成套件之後，首先我們需要設定一個 webpack.dev.config.js 檔案，並且在 entry 中加上 webpack/hot/dev-server 和 webpack-hot-middleware/client

entry: [
  'webpack/hot/dev-server',
  'webpack-hot-middleware/client',
  'client/index.js'
]

這個 webpack.config 主要是給開發伺服器用的，由於這時的匯出都會存在記憶體中，因此 path 可以直接設為根

output: {
  path: '/',
  publicPath: 'http://localhost:8080/scripts/',
  filename: 'bundle.js'
}

最後補上任何您所需要的 loaders，最重要的是記得。

plugins: [
  new webpack.HotModuleReplacementPlugin()
]

接著下來我們開始來撰寫這個開發環境的設定檔和 express 程式。

我們會匯入 webpack，webpack-dev-middleware， webpack-hot-middleware 和 express。

若需要搭配樣板引擎請自行安裝 ejs 或 jade

var express = require('express')
var webpack = require('webpack')
var WebpackDevMiddleware = require('webpack-dev-middleware')
var WebpackHotMiddleware = require('webpack-hot-middleware')

載入套件之後，使用 express 建立一個 http 應用程式與路由

app = express()
router = express.Router()

router.get('/', MainController)
app.use(router)

上面只是一個一般的 Server 應用，為了達成 webpack 的神奇黑魔法我們需要匯入 webpack 的設定

var config = require('./webpack.dev.config')

webpack 的角色就是我們的編譯器，透過下面的程式碼建立編譯器的 instance

var compiler = webpack(config)

重點來了，我們有了伺服器 express，有了編譯核心 webpack，接著我們需要 wrapper 來打包 webpack 將其合進 express 的 middleware stack 中。

app.use(WebpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  stats: { colors: true }
}))

publicPath 就是我們想要存取前端 bundle 的網址，路徑，位置。然後我們要再加上 webpack-hot-middleware 使其具備熱替換的功能。

app.use(WebpackHotMiddleware(compiler, {
  log: console.log
}))

最後則是 express 的監聽事件

app.listen(8080, function () {
  console.log('Listening on 8080')
})

完整的 server 程式碼如下

var express = require('express')
var webpack = require('webpack')
var WebpackDevMiddleware = require('webpack-dev-middleware')
var WebpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./config/webpack.dev.config')
var compiler = webpack(config)

app = express()
app.set('views', './views')
app.set('view engine', 'ejs')
app.use(express.static('public'));

app.use(WebpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  stats: { colors: true }
}))
app.use(WebpackHotMiddleware(compiler))

var router = express.Router()
router.get('/', function (req, res, next) {
  res.render('index', { message: 'Hey there!'});
})
app.use(router)

app.listen(8080, function () {
  console.log('Listening on 8080')
})

換個思路

假設我們並不是要實作一個全站 SPA 的站，實務上我們的確會遇到需要拆分為許多 view .html 的狀況，這種情況下我們會希望自己客製的這個 server 就像 webpack-dev-server 一樣，當然，這邊只是要指出做法，如果一樣您當然就直接用 webpack-dev-server 就好了。

根據上面這個需求最簡單的方式就是透過 express.static(__dirname) 讓 express 直接 return raw 檔案。

html-webpack-plugin

小弟認為在學習的過程中，最重要的就是搞懂動機，而這個 html-webpack-plugin 插件，其用途就是簡化建立 html 的過程。

先回頭看看上一小節，很直覺的，我們會依據需求建立不同的頁面(.html)，因為在開發過程中很多時候前端只需要注重那些互動介面的邏輯，樣式，樣板，標籤結構 ，那我們的重點只有 client 端的 html, js, css 就不在話下了吧！再如果我們又以元件為思路中心來設計實踐的話，那麼 html 裡面大部分的東西都會往元件的 template 搬。依據 SPA 的思路，html 的責任就只是把我們的 bundle 載入並掛載 root component。

如果照著這樣的想法，不斷的新增 html 結果大部分的內容都是重複的那就不太靠譜啦。我們就需要一種簡化工作的方式。

這個套件如上面所說就是簡化建立載入 bundle 的 html的步驟，用在 webpack 打包的檔案包含每次編譯都會更新的 hash 時特方便。

我們可以讓套件幫我們產生 html 或者搭配 loaders 與其他樣版引擎。

基本的用法

第一種最簡單的用途就是為我們的 bundle 包上一層 html

plugins: [
  new HtmlWebpackPlugin({
    filename: 'i_love_this_file.html'
  })
]

如果我們有多個 entry 進入點，那麼所有的 bundle 都會被加進這個自動產生的 HTML 中。
如果我們透過 webpack 匯出了 css 資源檔(例如 extract-text-plugin) 那麼這些檔案也會透過 被加入 HTML 中。

html-webpack-plugin 的設定

當然這個套件也有一些參數，讓我們可以透過設定提供其他的功能。

• title: 設定該 html 的