Webpack热更新（HMR）底层原理详解

Weback热更新（Hot Module Replacement, HMR）是现代前端开发中极其重要的功能，它允许在运行时更新各种模块，而无需完全刷新页面。

核心架构与工作流程

Webpack HMR基于客户端-服务端架构，包含以下关键组件：
1、Webpack Dev Server： 提供开发服务器和WebSocket服务
2、HMR Runtime： 注入到客户端代码中的运行时逻辑
3、Webpack插件系统： 处理模块更新和依赖管理

详细工作流程

1、建立WebSocket连接
当启动Webpack Dev Server时，它会创建一个WebSocket服务器。浏览器中的HMR运行时会与这个服务器建立持久化的WebSocket连接，用于实时通信。

// 简化版的连接建立代码
const socket = new WebSocket('ws://localhost:8080'); // 实际URL由webpack配置决定
socket.onmessage = function(event) {const message = JSON.parse(event.data);// 处理来自服务器的各种消息
};

2、文件监听与编译
Webpack通过webpack-dev-middleware监听文件系统的变化。当文件被修改时，Webpack会重新编译这些模块，但不会将结果写入磁盘，而是保存在内存中以提高性能。

3、生成更新文件
编译完成后，Webpack会生成两个关键文件：

• Manifest文件（[hash].hot-update.json）：描述哪些模块发生了变化
• Update chunk文件（[id].[hash].hot-update.js）：包含更新后的模块代码

这些文件存储在内存中，通过Dev Server提供访问。

4、推送更新通知
服务器通过WebSocket向客户端发送两条消息：
1、hash消息：包含本次编译的hash值<