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