JavaScript热模块替换机制（Hot Module Replacement，简称HMR）是前端构建工具提供的一项运行时更新能力，支持在不刷新整个页面的情况下，替换、添加或删除应用中的模块，同时保留应用的当前运行状态。
热模块替换的核心价值
传统的前端开发流程中，修改代码后需要手动刷新页面才能看到效果，刷新会导致页面状态丢失，比如表单输入内容、页面滚动位置等。热模块替换的出现解决了这个问题，它的主要优势包括：
- 无需刷新页面即可更新代码，保留当前应用状态
- 大幅缩短开发过程中的反馈周期，提升开发效率
- 支持样式、脚本等多种类型模块的局部更新
热模块替换的实现原理
热模块替换的整个流程可以分为几个核心环节：
1. 监听文件变化与通知
构建工具在开发模式下会监听项目文件的变化，当检测到文件修改后，会重新编译变更的模块，然后通过WebSocket向浏览器端推送更新通知，告知浏览器有新的模块版本可用。
2. 下载更新模块
浏览器收到更新通知后，会向开发服务器请求获取更新后的模块代码，通常以JSON格式返回更新模块的哈希值和对应的模块代码内容。
3. 模块替换与热更新执行
浏览器获取到新模块代码后，会执行以下操作：
- 用新模块代码替换内存中旧版本的同名模块
- 检查模块是否定义了热更新处理函数，如果定义了则执行对应的处理逻辑
- 如果没有找到对应的热更新处理，会向上冒泡查找父模块的处理逻辑，直到根模块
基于webpack配置热模块替换
webpack是最早支持热模块替换的构建工具之一，下面是基础的配置示例：
webpack配置文件
// webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
devServer: {
hot: true, // 开启热模块替换
open: true,
port: 3000
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
}),
// 可选：加入热替换插件，webpack5中devServer.hot为true时会自动注入
new webpack.HotModuleReplacementPlugin()
]
};
模块中定义热更新处理逻辑
如果希望某个模块更新时执行自定义逻辑，可以在模块中添加如下代码：
// src/utils/math.js
export function add(a, b) {
return a + b;
}
// 热模块替换处理逻辑
if (module.hot) {
// 接受自身模块的更新
module.hot.accept(() => {
console.log('math模块已热更新');
});
}
如果是处理样式文件的热更新，通常不需要手动编写处理代码，css-loader和style-loader已经内置了对应的热更新支持，修改样式后会自动更新页面样式。
热模块替换的注意事项
- 并不是所有模块都适合热替换，比如修改了入口文件或者根组件的结构，可能需要刷新页面才能生效
- 热替换过程中如果模块有副作用，需要在热更新处理函数中做好清理工作，避免副作用残留
- 生产环境一般不需要开启热模块替换，该功能主要用于开发阶段提升效率
- 部分旧版本浏览器可能不支持热替换所需的WebSocket等特性，需要做好兼容性判断
常见问题说明
很多开发者会疑惑module.hot这个对象的来源，它并不是JavaScript语言原生的API，而是构建工具在开发模式下注入到模块中的全局对象，用于提供热模块替换的相关能力。
需要注意的是，热模块替换属于开发环境的辅助功能，不要在生成环境的代码中依赖module.hot相关的逻辑，避免生产环境运行时报错。除了webpack之外，Vite、Parcel等现代前端构建工具也都支持热模块替换能力，其核心原理和上述流程类似，只是具体的实现细节和配置方式有所差异，开发者可以根据自己使用的构建工具查看对应的官方文档进行配置。
JavaScript热模块替换HMRwebpack修改时间：2026-06-16 16:18:19