一、概念

热重载（Hot Module Replacement，HMR）是 Webpack 提供的一项功能，它允许在开发过程中，无需刷新整个页面，即可实时更新修改的模块。

通过热重载，可以提高开发效率，快速查看代码变化的结果，并保持应用的状态（如表单数据）。

二、配置

1、启用热重载

可通过配置 devServer.hot 选项为 true 来启用 HMR

// webpack.config.js
module.exports = {
  // ...
  devServer: {
    hot: true,
  },
};

2、入口配置

在入口文件中，需要判断是否支持热重载并添加 HMR 的逻辑以监听模块的变化，并告诉 Webpack 如何处理更新。

// index.js
if (module.hot) {
  // 在入口文件中，需要添加 HMR 的逻辑以监听模块的变化，并告诉 Webpack 如何处理更新。
  module.hot.accept("./someModule.js", function () {
    // 当someModule.js发生变化时执行的代码
    console.log("someModule.js was updated!");
  });
  // 或者，如果不关心是哪个模块更新，只是想重新执行整个入口文件
  module.hot.accept();
}

日常开发中，vue-loader、style-loader 内置了相关的 HMR 功能，无需手动配置相关资源的 HMR 功能。

3、配置 HotModuleReplacementPlugin 插件

在 Webpack 5 版本以前，HMR 需要搭配相应的插件使用，常用的是webpack.HotModuleReplacementPlugin。

// webpack.config.js
const webpack = require("webpack");
// ...
module.exports = {
  devServer: {
    // ...
    hot: true, // 在webpack配置文件中启用热模块替换。可通过配置`devServer.hot`选项为`true`来启用 HMR
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), //HMR 需要搭配相应的插件`HotModuleReplacementPlugin`使用。
    // ...其他插件
  ],
};

完成上述配置后，运行 Webpack 开发服务器时，Webpack会在文件发生变化时将更新的模块代码发送给浏览器，浏览器会在不刷新整个页面的情况下，替换掉相应的模块。

请注意，热重载只适用于开发环境，并不能直接用于生产环境。在生产环境中，需要使用 Webpack 生成的静态文件进行部署。

注意

热重载可以提高开发效率，但在某些情况下可能会遇到一些问题，如状态丢失、事件绑定问题等。因此，对于某些情况下，可能需要手动刷新页面来确保正确的状态。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24