Webpack 热更新（HMR）流程

了解 Webpack 其他信息

Webpack 基本

关于 Vue 相关的问题可以阅读一下文章！

Vue 双向绑定原理

Vue Computed 原理

基本步骤

1. Webpack Watch Mode:

• 1.1 开发者启动 Webpack 时，可以选择使用 watch 模式。
• 1.2 Webpack 使用 fs.watch 或其他文件系统监视工具来监听文件变化。
• 1.3 当文件发生变化时，Webpack 会重新编译受影响的模块。

2. Webpack Dev Server Setup:

• 2.1 Webpack Dev Server 在后台运行，它是一个 HTTP 服务器，可以提供静态资源和处理 WebSocket 连接。
• 2.2 它监听来自 Webpack 的编译完成事件，并通过 WebSocket 通知浏览器。

3. HotModuleReplacementPlugin:

• 3.1 HotModuleReplacementPlugin 在 HTML 文件中注入 HMR 运行时代码。
• 3.2 这段运行时代码用于处理来自 Dev Server 的更新消息。

4. Client-side Setup HMR Script:

• 4.1 客户端脚本通过 WebSocket 与 Dev Server 保持连接，并监听更新消息。
• 4.2 当接收到更新消息时，客户端脚本会解析消息中的信息，以确定哪些模块需要更新。

5. HMR Update Flow:

• 5.1 当文件发生变化时，Dev Server 通过 WebSocket 通知客户端。
• 5.2 客户端通过 AJAX 请求从 Dev Server 获取新的模块。
• 5.3 客户端脚本使用新模块替换旧模块，并执行必要的副作用，如更新 DOM。
• 5.4 如果替换过程中出现问题，客户端可能会触发页面重载。

其他配置

在 HRM 失败时，不刷新页面作为退回

{
    devServer: {
        hot: 'only', // 启用模块热替换功能，在构建失败时不刷新页面作为回退，使用 `hot: 'only'`：
    }
}

总结

• Webpack 的 watch 模式用于监听文件变化。
• Webpack Dev Server 通过 WebSocket 与客户端通信。
• HotModuleReplacementPlugin 注入 HMR 运行时代码。
• 客户端脚本通过 WebSocket 接收更新消息，并通过 AJAX 请求获取新的模块。
• 如果替换过程中出现问题，客户端可能会触发页面重载。

本文就是介绍一下最最最简单的热更新的流程，想要了解的很详细需要阅读源码才是正解，之后有更深入的了解其原理会进行补充~~~

参考地址 webpack hot module replacement