Webpack 2 實作筆記 (9) — Hot Module Replacement — CSS

介紹如何使用 HMR,讓你不必重整瀏覽器就可以更新 CSS 檔案。

Webpack 2 — Hot Module Replacement — CSS

更多詳細設定可以參考官方文件: Using webpack with a config

啟動 HMR 很簡單,只要在 webpack.config.jsdevServer 設定 hot: true

...
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
hot: true, // 啟動 HMR
stats: "errors-only",
open: true
},
...

然後要 include webpack:

...
const webpack = require('webpack');
...

接著建立兩個 plugin:

...
plugins: [
...
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
],
...

不過由於啟動 HMR 之後,ExtractTextPlugin 就無法作用,所以先關掉 ExtractTextPlugin

...
plugins: [
...
new ExtractTextPlugin({
filename: 'app.css',
disable: true, // 把 ExtractTextPlugin 關掉
allChunks: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
],
...

然後修改原本的 loader 設定:

...
module: {
rules: [
{
test: /\.scss$/,
// use: ExtractTextPlugin.extract({
// fallback: 'style-loader',
// use: ['css-loader', 'sass-loader'],
// publicPath: './dist'
// }),
use: ['style-loader', 'css-loader', 'sass-loader'],
},
...
],
},
...

執行 yarn run dev,可以看到成功啟動 HMR:

可以修改 src/app.scss 觀察變化。

Show your support

Clapping shows how much you appreciated Toumasaya’s story.