webpack 的热更新HMR是如何做到的

1. HMR

2. 热更新流程

3. 热更新原理

答:

1. 什么是 HMR

HMR全称 Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用. 例如，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会丢失

如果使用的是 HMR，就可以实现只将修改的模块实时替换至应用中，不必完全刷新整个应用

在webpack中配置开启热模块也非常的简单，如下代码：

const webpack = require('webpack')
module.exports = {
  // ...
  devServer: {
    // 开启 HMR 特性
    hot: true
    // hotOnly: true
  }
}

2. 热更新流程

3. 热更新原理

上面图中，可以分成两个阶段：

在编写未经过webpack打包的源代码后，Webpack Compile 将源代码和 HMR Runtime 一起编译成 bundle文件，传输给Bundle Server 静态资源服务器

当某一个文件或者模块发生变化时，webpack监听到文件变化对文件重新编译打包，编译生成唯一的hash值，这个hash值用来作为下一次热更新的标识

根据变化的内容生成两个补丁文件：manifest（包含了 hash 和 chunkId，用来说明变化的内容）和chunk.js 模块

由于socket服务器在HMR Runtime 和 HMR Server之间建立 websocket链接，当文件发生改动的时候，服务端会向浏览器推送一条消息，消息包含文件改动后生成的hash值，如下图的h属性，作为下一次热更新的标识

在浏览器接受到这条消息之前，浏览器已经在上一次socket 消息中已经记住了此时的hash 标识，这时候我们会创建一个 ajax 去服务端请求获取到变化内容的 manifest 文件

manifest 文件包含重新 build 生成的 hash 值，以及变化的模块，对应上图的c属性

浏览器根据 manifest 文件获取模块变化的内容，从而触发render流程，实现局部模块更新

补充

补充：HMR 三大主角 + 关键 API：

webpack-dev-server：本地 dev server，编译 + 启动 HTTP 服务 + WebSocket。

webpack-hot-middleware / HMR Runtime：浏览器端运行时，收到消息后定位需要替换的模块。

webpack/hot/dev-server：开启 HMR 的客户端入口（通过 devServer.hot: true 注入）。业务代码使用 HMR：
if (module.hot) {
  module.hot.accept('./App', () => { /* 重新渲染 */ });
  module.hot.dispose(() => { /* 清理副作用 */ });
}
框架层面：React 用 react-refresh、Vue 用 @vue/runtime-hmr，自动接管组件热替换。