目录
模块热替换 HMR
允许在运行时更新各种模块,而无需进行完全刷新。不适用于生产环境,意味着应当只在开发环境使用。启用HMR实际上就是更新 webpack-dev-server
的配置,及使用 webpack 内置的 HMR 插件。
webpack官方文档中介绍,使用HMR时,需要满足两个条件:
- 配置devServer.hot为true
- 配置webpack.HotModuleReplacementPlugin插件
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
hot: true
},
};
webpack要完全启用HMR需要使用webpack.HotModuleReplacementPlugin。如果webpack或webpack-dev-server 通过命令行添加 --hot 选项启动,该插件会自动添加,因此不需要将它添加到webpack.config.js中
但是经实际使用 webpack-dev-server 时发现,在webpack.config.js中仅仅配置了devServer.hot:true
,并未添加上述插件时仍然实现了HMR
原来 webpack-dev-server 内部自动帮我们完成了这个事情。通过在Github 的 webpack-dev-server 搜索,找到以下源码:
if (options.hot || options.hotOnly) {
config.plugins = config.plugins || [];
// 判断了配置的插件中是否包含名为HotModuleReplacementPlugin的插件,如果没有则添加。
if (
!config.plugins.find(
// Check for the name rather than the constructor reference in case
// there are multiple copies of webpack installed
(plugin) => plugin.constructor.name === 'HotModuleReplacementPlugin'
)
) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
}
}
HMR监听文件变化
可以使用 module.hot.accept
来监听指定的文件变化,从而做一些特殊的处理
index.js
if (module.hot) {
module.hot.accept('./print.js', function () {
console.log('print.js 文件改变了 !');
})
}
HMR 修改样式表
当更新 CSS 依赖模块时,实际上也是借助 style-loader
在后台使用 module.hot.accept
来修补(patch) <style>
标签。