webpack 热更新原理解析

概念 作用
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 在接收到文件变化后，就会更新代码
  • 最终代码更新，且无需刷新浏览器
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。