New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

webpack HMR 原理解析 #22

Open

Cosen95 opened this issue Mar 4, 2020 · 1 comment

Labels

webpack

Owner

Cosen95 commented Mar 4, 2020

No description provided.

Cosen95 added the webpack label

Owner Author

Cosen95 commented Jul 12, 2020

先来看下热更新的完整流程：

对应模块分别是：

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 去局部更新页面代码

Diamond2128 mentioned this issue

webpack HMR 原理解析 Diamond2128/fe-interview#89

Open

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment