webpack學習之路（五）

熱模組替換(hmr)是webpack提供的最有用的功能之一，它讓各種模組可以在執行時更新而無需重新整理，本篇主要注重於實現。

ps：hmr是為開發模式設計的，也只能用於開發模式。

啟用hrm只需要更新webpack-dev-server的配置，然後使用webpack的內建外掛程式，同時要刪掉print.js入口。如果你使用的是webpack-dev-middleware，請使用webpack-hot-middleware包去啟用hrm。

webpack.config.js

const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
const cleanwebpackplugin = require('clean-webpack-plugin');
+ const webpack = require('webpack');
module.exports =,
plugins: [
new cleanwebpackplugin(['dist']),
newhtmlwebpackplugin(),
+ new
webpack.namedmodulesplugin(),
+ new
webpack.hotmodulereplacementplugin()
],output: 
};

你也可以使用腳手架的webpack-dev-server --hotonly來更新webpack-dev-server的這個配置。這裡還新增了namedmodulesplugin以便更容易檢視要修補(patch)的依賴。在起步階段，我們將通過在命令列中執行npm start來啟動並執行 dev server。

更新一下index.js使得當print.js檔案有任何變化就通知webpack去更新模組。

index.js

import _ from 'lodash';
import printme from './print.js';
function
component() 
++ if
(module.hot) )
+ }

如果現在還沒把專案跑起來的話就npm start一下，然後修改print.js中的內容，你就會在瀏覽器的控制台看到如下輸出：

print.js

export default
function
printme()

console

[hmr] waiting for
update signal from wds...
main.js:4395[wds] hot module replacement enabled.
+ main.js:4330 [hmr] checking for
updates on the server...
+ main.js:10024 accepting the updated printme module!
+ 0.4b8ee77….hot-update.js:10updating print.js...
+ main.js:4330[hmr] updated modules:
+ main.js:4330 [hmr] - 20
+ main.js:4330 [hmr] consider using the namedmodulesplugin for module names.

當使用dev server和node.js api時，不要把dev server的選項放在webpack的配置物件中，而應該在建立選項時把它作為第二個引數傳遞：

new webpackdevserver(compiler, options)

啟用hrm還需要修改webpack的配置物件以包含hrm入口，webpack-dev-server包提供乙個adddevseverentrypoints方法來做這件事：

dev-server.js

const webpackdevserver = require('webpack-dev-server');
const webpack = require('webpack');
const config = require('./webpack.config.js');
const options =;
webpackdevserver.adddevserverentrypoints(config, options);
const compiler =webpack(config);
const server = new
webpackdevserver(compiler, options);
server.listen(5000, 'localhost', () =>);

ps:如果你使用的是webpack-dev-middleware可以通過webpack-hot-middleware包來啟用hrm。

hrm是比較難掌握的，如果你點選一下頁面上的按鈕會發現控制台列印的還是舊的那一句輸出。這是因為按鈕的事件還是繫結在原來的printme方法上。我們需要使用module.hot.accept來更新這個繫結關係：

index.js

import _ from 'lodash';
import printme from './print.js';
function
component() 
+ let element = component(); //
store the element to re-render on print.js changes
if(module.hot) )
}

這只是乙個例子，還有很多地方能讓人輕易犯錯，幸運的是有很多loader（下面會提到一些）可以讓hrm變得平易近人一些。

借助於style-loader，css的hrm變得非常簡單，當css模組更新時style-loader會在後台使用module.hot.accept來patch標籤。

如果沒安裝的話這裡要安裝一下並且更新配置：

npm install --s**e-dev style-loader css-loader

webpack.config.js

const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
const cleanwebpackplugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports =,
+module: 
+]+},
plugins: [
new cleanwebpackplugin(['dist']),
newhtmlwebpackplugin(),
newwebpack.hotmodulereplacementplugin()
],output: 
};

現在熱載入樣式表會和引入模組一樣簡單：

project

webpack-demo
| -package.json
| -webpack.config.js
| - /dist
| -bundle.js
| - /src
| -index.js
| -print.js
+ | - styles.css

styles.css

body

index.js

import _ from 'lodash';
import printme from './print.js';
+ import './styles.css';
function
component() 
let element =component();
if(module.hot) )
}

再把背景改為紅色你會發現瀏覽器會立刻更改而無需重新整理：

styles.css

body ＝

社群還有許多其他 loader 和示例，可以使 hmr 與各種框架和庫(library)平滑地進行互動……

webpack學習之路（五）

webpack學習之路之webpack核心概念

webpack學習之路（七）

webpack學習之路（三）

webpack學習之路（五）

webpack學習之路之webpack核心概念

webpack學習之路（七）

webpack學習之路（三）

相關推薦