热模块替换
热模块替换 (HMR) 是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需完全刷新。本页面重点介绍 **实现**，而 概念页面 详细介绍了它的工作原理以及它为什么有用。
启用 HMR
此功能非常有利于提高生产力。我们只需要更新我们的 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',
+ // Runtime code for hot module replacement
+ hot: 'webpack/hot/dev-server.js',
+ // Dev server client for web socket transport, hot and live reload logic
+ client: 'webpack-dev-server/client/index.js?hot=true&live-reload=true',
},
devtool: 'inline-source-map',
devServer: {
static: './dist',
+ // Dev server client for web socket transport, hot and live reload logic
+ hot: false,
+ client: false,
},
plugins: [
new HtmlWebpackPlugin({
title: 'Hot Module Replacement',
}),
+ // Plugin for 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('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通过 Node.js API
在使用 Webpack Dev Server 和 Node.js API 时，不要将开发服务器选项放在 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: [
// Runtime code for hot module replacement
'webpack/hot/dev-server.js',
// Dev server client for web socket transport, hot and live reload logic
'webpack-dev-server/client/index.js?hot=true&live-reload=true',
// Your entry
'./src/index.js',
],
devtool: 'inline-source-map',
plugins: [
// Plugin for hot module replacement
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` and `client` options are disabled because we added them manually
const server = new webpackDevServer({ hot: false, client: false }, compiler);
(async () => {
await server.start();
console.log('dev server is running');
})();查看 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 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);
})
}这只是一个例子，但还有很多其他例子很容易让人感到困惑。幸运的是，有很多加载器（其中一些在下面提到）可以使热模块替换变得更容易。
使用样式表的 HMR
使用 style-loader，使用 CSS 的热模块替换实际上相当简单。此加载器在幕后使用 module.hot.accept 来修补 <style> 标签，当 CSS 依赖项更新时。
首先，让我们使用以下命令安装这两个加载器
npm install --save-dev style-loader css-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,
},
};可以通过将样式表导入模块来实现热加载样式表。
项目
webpack-demo
| - package.json
| - webpack.config.js
| - /dist
| - bundle.js
| - /src
| - index.js
| - print.js
+ | - styles.cssstyles.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 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);
})
}
将body上的样式更改为background: red;，您应该立即看到页面背景颜色更改，而无需完全刷新。
styles.css
body {
- background: blue;
+ background: red;
}其他代码和框架
社区中有许多其他加载器和示例，可以使 HMR 与各种框架和库平滑地交互...
- React 热加载器：实时调整 React 组件。
- Vue 加载器：此加载器开箱即用地支持 Vue 组件的 HMR。
- Elm 热 Webpack 加载器：支持 Elm 编程语言的 HMR。
- Angular HMR：无需加载器！HMR 支持内置于 Angular CLI 中，在您的
ng serve命令中添加--hmr标志。 - Svelte 加载器：此加载器开箱即用地支持 Svelte 组件的 HMR。
19 位贡献者
