webpack的热更新是如何做到的？原理是什么？

一、是什么

HMR 全称 Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用

例如，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会丢失

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

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

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

通过上述这种配置，如果我们修改并保存css文件，确实能够以不刷新的形式更新到页面中

但是，当我们修改并保存js文件之后，页面依旧自动刷新了，这里并没有触发热模块

所以，HMR 并不像 Webpack 的其他特性一样可以开箱即用，需要有一些额外的操作

我们需要去指定哪些模块发生更新时进行HRM，如下代码：

二、webpack的编译构建过程

 项目启动后，进行构建打包，控制台会输出构建过程，我们可以观察到生成了一个 Hash值：a93fd735d02d98633356。

然后，在我们每次修改代码保存后，控制台都会出现 Compiling…字样，触发新的编译中...可以在控制台中观察到：

• 新的Hash值：a61bdd6e82294ed06fa3
• 新的json文件： a93fd735d02d98633356.hot-update.json
• 新的js文件：index.a93fd735d02d98633356.hot-update.js

首先，我们知道Hash值代表每一次编译的标识。其次，根据新生成文件名可以发现，上次输出的Hash值会作为本次编译新生成的文件标识。依次类推，本次输出的Hash值会被作为下次热更新的标识。

然后看一下，新生成的文件是什么？每次修改代码，紧接着触发重新编译，然后浏览器就会发出 2 次请求。请求的便是本次新生成的 2 个文件。如下：

 首先看json文件，返回的结果中，h代表本次新生成的Hash值，用于下次文件热更新请求的前缀。c表示当前要热更新的文件对应的是index模块。

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

• 启动阶段为上图 1 - 2 - A - B

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

• 更新阶段为上图 1 - 2 - 3 - 4

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

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

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

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

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

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

关于webpack热模块更新的总结如下：

• 启动时建立 WebSocket 连接：在项目启动时，Webpack 会创建与开发服务器的WebSocket连接，用于在构建完成后接收更新的模块。
• 构建编译阶段：Webpack 在编译时会在每个模块中注入 HMR 运行时代码。该代码会监听源代码的变化，并通知 HMR runtime 进行处理。
• 文件监控：Webpack 会监控所有入口文件及其依赖的文件，一旦检测到文件发生变化，会触发重新编译。
• 构建完成：当编译完成后，Webpack 会将编译结果发送给开发服务器，并通过 WebSocket 通知客户端有新的资源可用。
• 模块更新：在客户端收到更新通知后，HMR runtime 会与服务器建立一条新的短连接，并请求更新的模块信息。
• 应用更新：服务器端收到模块请求后，会以增量更新的方式构建新的模块，并通过短连接发送给客户端。
• 模块替换：在客户端收到新的模块后，HMR runtime 会根据更新策略决定如何替换旧的模块。一般情况下，它会尝试保留应用的状态，例如保留表单数据、滚动位置等。