webpack學習之路（五）
阿新 • • 發佈：2018-11-02
熱模組替換
熱模組替換(HMR)是webpack提供的最有用的功能之一，它讓各種模組可以在執行時更新而無需重新整理，本篇主要注重於實現。
ps：HMR是為開發模式設計的，也只能用於開發模式。
啟用HRM
啟用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 = {
entry: {
- app: './src/index.js',
- print: './src/print.js'
+ app: './src/index.js' }, devtool: 'inline-source-map', devServer: { contentBase: './dist', + hot: true }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: 'Hot Module Replacement' }), + new webpack.NamedModulesPlugin(), + new webpack.HotModuleReplacementPlugin() ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } }; 你也可以使用腳手架的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() {
var element = document.createElement('div');
var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
+
+ if (module.hot) {
+ module.hot.accept('./print.js', function() {
+ console.log('Accepting the updated printMe module!');
+ printMe(); + }) + } 如果現在還沒把專案跑起來的話就npm start一下，然後修改print.js中的內容，你就會在瀏覽器的控制檯看到如下輸出：
print.js
export default function printMe() {
- console.log('I get called from print.js!');
+ console.log('Updating print.js...')
}
console
[HMR] Waiting for update signal from WDS...
main.js:4395 [WDS] Hot Module Replacement enabled.
+ 2main.js:4395 [WDS] App updated. Recompiling...
+ main.js:4395 [WDS] App hot update...
+ main.js:4330 [HMR] Checking for updates on the server...
+ main.js:10024 Accepting the updated printMe module! + 0.4b8ee77….hot-update.js:10 Updating print.js... + main.js:4330 [HMR] Updated modules: + main.js:4330 [HMR] - 20 + main.js:4330 [HMR] Consider using the NamedModulesPlugin for module names. 通過Node.js API:
當使用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 = { contentBase: './dist', hot: true, host: 'localhost' }; webpackDevServer.addDevServerEntrypoints(config, options); const compiler = webpack(config); const server = new webpackDevServer(compiler, options); server.listen(5000, 'localhost', () => { console.log('dev server listening on port 5000'); });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() {
var element = document.createElement('div');
var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe; // onclick event is bind to the original printMe function
element.appendChild(btn);
return element;
}
- document.body.appendChild(component());
+ let element = component(); // Store the element to re-render on print.js changes
+ document.body.appendChild(element);
if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('Accepting the updated printMe module!');
- printMe(); + document.body.removeChild(element); + element = component(); // Re-render the "component" to update the click handler + document.body.appendChild(element); }) }這只是一個例子，還有很多地方能讓人輕易犯錯，幸運的是有很多loader（下面會提到一些）可以讓HRM變得平易近人一些。
HRM修改樣式表：
藉助於style-loader，css的HRM變得非常簡單，當css模組更新時style-loader會在後臺使用module.hot.accept來patch<style>標籤。
如果沒安裝的話這裡要安裝一下並且更新配置：
npm install --save-dev style-loader css-loaderwebpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/, + use: ['style-loader', 'css-loader'] + } + ] + }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: 'Hot Module Replacement' }), new webpack.HotModuleReplacementPlugin() ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };現在熱載入樣式表會和引入模組一樣簡單：
project
webpack-demo
| - package.json
| - webpack.config.js
| - /dist
| - bundle.js
| - /src
| - index.js
| - print.js
+ | - styles.css
styles.css
body {
background: blue; } index.js
import _ from 'lodash';
import printMe from './print.js';
+ import './styles.css';
function component() {
var element = document.createElement('div');
var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe; // onclick event is bind to the original printMe function
element.appendChild(btn);
return element;
}
let element = component();
document.body.appendChild(element);
if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('Accepting the updated printMe module!');
document.body.removeChild(element);
element = component(); // Re-render the "component" to update the click handler
document.body.appendChild(element);
})
}再把背景改為紅色你會發現瀏覽器會立刻更改而無需重新整理：
styles.css
body {
- background: blue;
+ background: red;
}其它程式碼和框架：
社群還有許多其他 loader 和示例，可以使 HMR 與各種框架和庫(library)平滑地進行互動……
- React Hot Loader：實時調整 react 元件。
- Vue Loader：此 loader 支援用於 vue 元件的 HMR，提供開箱即用體驗。
- Elm Hot Loader：支援用於 Elm 程式語言的 HMR。
- Redux HRM：無需 loader 或外掛！只需對 main store 檔案進行簡單的修改。
- Angular HRM：No loader necessary! A simple change to your main NgModule file is all that's required to have full control over the HMR APIs.沒有必要使用 loader！只需對主要的 NgModule 檔案進行簡單的修改，由 HMR API 完全控制。