webpack4.15.1 学习笔记(三) — 模块热替换HMR

目录

• 模块热替换 HMR
• HMR监听文件变化
• HMR 修改样式表

模块热替换 HMR

允许在运行时更新各种模块，而无需进行完全刷新。不适用于生产环境，意味着应当只在开发环境使用。启用HMR实际上就是更新 webpack-dev-server的配置，及使用 webpack 内置的 HMR 插件。

webpack官方文档中介绍，使用HMR时，需要满足两个条件：

1. 配置devServer.hot为true
2. 配置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> 标签。