| 概念 | 作用 |
|---|---|
| webpack Compile | 将 JS 编译成 Bundle |
| Bundle Server | 提供文件在浏览器端以服务器的方式的访问（正常是通过文件目录来访问） |
| HMR Server | 将热更新的文件输出给 HMR Runtime |
| HMR Runtime | 在项目打包阶段，会被注入到浏览器端的bundle.js里面 |
| bundle.js | 构建后最终输出的文件 |
热更新过程
1. 启动阶段 ①->②->A->B
- 代码文件通过
webpack Compile进行打包 - 将打包好的文件传输给
Bundle Server - 然后
Bundle Server会让文件以服务器的方式让浏览器可以访问到 - 代码展示到浏览器
2. 更新阶段 ①->②->③->④
- 变更后的代码同样会通过
webpack Compile进行打包编译，、 - 编译好之后会发送给
HMR Server -
HMR Server即可知道哪些资源、js模块、文件发生了改变 - 然后通过 websorket 传输
.hot-update.json的形式，通知HMR Runtime -
HMR Runtime在接收到文件变化后，就会更新代码 - 最终代码更新，且无需刷新浏览器
网友评论