【webpac篇】HMR热加载

学习文章

HMR原理解析
HRM原理解析

思维导图

【webpac篇】HMR热加载_第1张图片

抓重点

服务端(启动服务会建立一个server)

  1. 配置了热更新之后,会new HotModuleReplacementPlugin实例进入plugin里
  2. 使用wepack的watch钩子监听是否改变
  3. 但是在devserver阶段是不会直接改变依赖内容,需要使用memory-fs这个框架去存入内存中
  4. 与客户端建立websocket长连接
  5. 当我们的代码内容改变之后,传递type:ok,在这之前会传递我们保存进内存中的hash
  6. 当接收到客户端请求后,会将新的模块添加到modules中,当下次调用webpack_require,获取到的就是新模块了。接着在缓存中删除过期的模块和依赖

客户端(浏览器)

  1. 植入runtime.js逻辑
  2. 接收到ok后,调用runtime里逻辑,hotDownloadManifast和hotDownloadUpdateChunk
  3. ajax请求更新的文件,返回对应的文件信息
  4. 通过jsonp请求最新的代码模块
  5. 更新依赖文件,删除旧的不存在的依赖文件

废话

其实一个好的机制不仅仅在这个领域有所建树,这种思维我们可以扩展到多个方面,感谢大佬文章学习,去拜源码去了。

你可能感兴趣的:(webpack,hmr,热加载)