模块热替换(HMR)是 webpack 提供的最有用的功能之一。它能帮助在运行时不完全刷新页面的情况下更新所有类型的模块。本页面重点介绍 如何使用,而 概念 页面提供了更多关于它的工作原理以及为什么它有用的细节。
此功能可以很大程度提高生产效率。我们要做的就是更新 webpack-dev-server 配置,
然后使用 webpack 内置的 HMR 插件。我们还要删除掉 print.js
的入口起点,
因为现在已经在 index.js
模块中引用了它。
从 webpack-dev-server
v4.0.0 开始,模块热替换是默认开启的。
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
- print: './src/print.js',
},
devtool: 'inline-source-map',
devServer: {
static: './dist',
+ hot: true,
},
plugins: [
new HtmlWebpackPlugin({
title: 'Hot Module Replacement',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};
也可以为 HMR 提供入口起点:
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const webpack = require("webpack");
module.exports = {
entry: {
app: './src/index.js',
- print: './src/print.js',
+ // 模块热替换的运行时代码
+ hot: 'webpack/hot/dev-server.js',
+ // 用于 web 套接字传输、热重载逻辑的 web server 客户端
+ client: 'webpack-dev-server/client/index.js?hot=true&live-reload=true',
},
devtool: 'inline-source-map',
devServer: {
static: './dist',
+ // 用于 web 套接字传输、热重载逻辑的 web server 客户端
+ hot: false,
+ client: false,
},
plugins: [
new HtmlWebpackPlugin({
title: 'Hot Module Replacement',
}),
+ // 模块热替换的插件
+ new webpack.HotModuleReplacementPlugin(),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};
现在修改 index.js
文件,以便检测到 print.js
内部发生更改时告诉 webpack 接受更新的模块。
index.js
import _ from 'lodash';
import printMe from './print.js';
function component() {
const element = document.createElement('div');
const 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();
+ })
+ }
更改 print.js
中 console.log
的输出内容,你将会在浏览器中看到如下的输出
(不要担心现在 button.onclick = printMe()
的输出,我们稍后也会更新该部分)。
print.js
export default function printMe() {
- console.log('我在 print.js 中被调用了!');
+ console.log('正在更新 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 正在更新 print.js……
+ main.js:4330 [HMR] Updated modules:
+ main.js:4330 [HMR] - 20
在 Node.js API 中使用 webpack dev server 时,不要将 dev server 选项放在 webpack 配置对象中。而是在创建时, 将其作为第二个参数传递。例如:
new WebpackDevServer(options, compiler)
想要启用 HMR,还需要修改 webpack 配置对象,使其包含 HMR 入口起点。这是关于如何使用的一个基本示例:
dev-server.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const webpackDevServer = require('webpack-dev-server');
const config = {
mode: 'development',
entry: [
// 模块热替换的运行时代码
'webpack/hot/dev-server.js',
// 用于 web 套接字传输、热重载逻辑的 web server 客户端
'webpack-dev-server/client/index.js?hot=true&live-reload=true',
// 你的入口起点
'./src/index.js',
],
devtool: 'inline-source-map',
plugins: [
// 模块热替换的插件
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title: 'Hot Module Replacement',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};
const compiler = webpack(config);
// 由于手动添加了 `hot` 与 `client` 参数,其将被禁用
const server = new webpackDevServer({ hot: false, client: false }, compiler);
(async () => {
await server.start();
console.log('dev server 正在运行');
})();
参阅 webpack-dev-server
的 Node.js API 的完整文档 以了解更多。
模块热替换可能比较难以掌握。为了说明这一点,我们回到刚才的示例中。如果继续点击示例页面上的按钮
会发现控制台仍在打印旧的 printMe
函数。
这是因为按钮的 onclick
事件处理函数仍然绑定在旧的 printMe
函数上。
为了让 HMR 正常工作,我们需要更新代码,使用 module.hot.accept
将其绑定到新的 printMe
函数上:
index.js
import _ from 'lodash';
import printMe from './print.js';
function component() {
const element = document.createElement('div');
const btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe; // onclick 事件仍然绑定着原本的 printMe 函数
element.appendChild(btn);
return element;
}
- document.body.appendChild(component());
+ let element = component(); // 存储 element,以在 print.js 修改时重新渲染
+ document.body.appendChild(element);
if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('正在接受更新后的 printMe 模块!');
- printMe();
+ document.body.removeChild(element);
+ element = component(); // 重新渲染 "component",以便更新 click 事件处理函数
+ document.body.appendChild(element);
})
}
这仅仅是一个示例,还有很多让人易于犯错的情况。 幸运的是,有很多 loader(下面会提到一些)可以使得模块热替换变得更加容易。
借助 style-loader
后,使用模块热替换加载 CSS 实际上极其简单。此 loader 在幕后使用了 module.hot.accept
,在 CSS 依赖模块更新之后,会将其修补到 <style>
标签中。
首先使用以下命令安装两个 loader :
npm install --save-dev style-loader css-loader
然后更新配置文件,使用这两个 loader。
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
},
devtool: 'inline-source-map',
devServer: {
static: './dist',
hot: true,
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: ['style-loader', 'css-loader'],
+ },
+ ],
+ },
plugins: [
new HtmlWebpackPlugin({
title: 'Hot Module Replacement',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};
热加载样式表也可以通过将它们引入一个模块来实现:
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() {
const element = document.createElement('div');
const btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe; // onclick 事件仍然绑定着原本的 printMe 函数
element.appendChild(btn);
return element;
}
let element = component();
document.body.appendChild(element);
if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('正在接受更新后的 printMe 模块!');
document.body.removeChild(element);
element = component(); // 重新渲染 component 以更新点击事件处理程序
document.body.appendChild(element);
})
}
将 body
的 style 改为 background: red;
,你应该可以立即看到页面的背景颜色随之更改,而无需完全刷新。
styles.css
body {
- background: blue;
+ background: red;
}
社区还提供许多其他 loader 和示例,可以使 HMR 与各种框架和库平滑地进行交互……