T> 本指南继续沿用开发指南中的代码示例。
模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新。本页面重点介绍实现,而概念页面提供了更多关于它的工作原理以及为什么它有用的细节。
W> HMR 不适用于生产环境,这意味着它应当只在开发环境使用。更多详细信息,请查看生产环境构建指南。
启用 HMR
启用此功能实际上相当简单。而我们要做的,就是更新 webpack-dev-server 的配置,和使用 webpack 内置的 HMR 插件。我们还要删除掉 print.js 的入口起点,因为它现在正被 index.js 模式使用。
T> 如果你使用了 webpack-dev-middleware 而没有使用 webpack-dev-server,请使用 webpack-hot-middleware package 包,以在你的自定义服务或应用程序上启用 HMR。
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')
}
}
T> 你可以通过命令来修改 webpack-dev-server 的配置:webpack-dev-server --hotOnly。
注意,我们还添加了 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()
+ })
+ }
更改 print.js 中 console.log 的输出内容,你将会在浏览器中看到如下的输出。
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
当使用 webpack dev server 和 Node.js API 时,不要将 dev server 选项放在 webpack 配置对象(webpack config object)中。而是,在创建选项时,将其作为第二个参数传递。例如:
new WebpackDevServer(compiler, options)
想要启用 HMR,还需要修改 webpack 配置对象,使其包含 HMR 入口起点。webpack-dev-server package 中具有一个叫做 addDevServerEntrypoints 的方法,你可以通过使用这个方法来实现。这是关于如何使用的一个小例子:
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')
})
T> 如果你在 使用 webpack-dev-middleware,可以通过 webpack-hot-middleware package 包,在自定义开发服务下启用 HMR。
问题
模块热替换可能比较难掌握。为了说明这一点,我们回到刚才的示例中。如果你继续点击示例页面上的按钮,你会发现控制台仍在打印这旧的 printMe 功能。
这是因为按钮的 onclick 事件仍然绑定在旧的 printMe 函数上。
为了让它与 HRM 正常工作,我们需要使用 module.hot.accept 更新绑定到新的 printMe 函数上:
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 事件绑定原始的 printMe 函数上
element.appendChild(btn)
return element
}
- document.body.appendChild(component())
+ let element = component() // 当 print.js 改变导致页面重新渲染时,重新获取渲染的元素
+ 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() // 重新渲染页面后,component 更新 click 事件处理
+ document.body.appendChild(element)
})
}
这只是一个例子,但还有很多其他地方可以轻松地让人犯错。幸运的是,存在很多 loader(其中一些在下面提到),使得模块热替换的过程变得更容易。
HMR 修改样式表
借助于 style-loader 的帮助,CSS 的模块热替换实际上是相当简单的。当更新 CSS 依赖模块时,此 loader 在后台使用 module.hot.accept 来修补(patch)
所以,可以使用以下命令安装两个 loader :
npm install --save-dev style-loader css-loader
接下来我们来更新 webpack 的配置,让这两个 loader 生效。
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-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)
})
}
将 body 上的样式修改为 background: red,你应该可以立即看到页面的背景颜色随之更改,而无需完全刷新。
styles.css
body {
- background: blue
+ background: red
}
其他代码和框架
社区还有许多其他 loader 和示例,可以使 HMR 与各种框架和库(library)平滑地进行交互……
Vue Loader:此 loader 支持用于 vue 组件的 HMR,提供开箱即用体验。
Elm Hot Loader:支持用于 Elm 程序语言的 HMR。
Redux HMR:无需 loader 或插件!只需对 main store 文件进行简单的修改。
Angular HMR:No loader necessary! A simple change to your main NgModule file is all that&aposs required to have full control over the HMR APIs.没有必要使用 loader!只需对主要的 NgModule 文件进行简单的修改,由 HMR API 完全控制。
T> 如果你知道任何其他 loader 或插件,能够有助于或增强模块热替换(Hot Module Replacement),请提交一个 pull request 以添加到此列表中!