webpack HMR 原理解析

[Cosen95]

[Cosen95]

先来看下热更新的完整流程： 对应模块分别是：

• Webpack Compiler：将 JS 编译成 Bundle
• HMR Server：将热更新的文件输出给 HMR Runtime
• Bundle Server：提供文件在浏览器的访问
• HMR Runtime：会被注入到浏览器，更新文件的变化
• bundle.js：构建输出的文件

首先初次构建时对应上图的流程是：

1 > 2 > A > B

文件发生改变（对应热更新）的流程是：

1 > 2 > 3 > 4 > 5

总结一下就是：

• 文件发生改动
• 文件系统接收更改并通知 webpack
• webpack 重新编译，并通知 HMR 服务器进行更新
• HMR Server 使用 websocket 通知 HMR Runtime 需要更新模块信息
• HMR Runtime 去局部更新页面代码