【webpac篇】HMR热加载

学习文章

HMR原理解析
HRM原理解析

思惟导图

抓重点

服务端（启动服务会创建一个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. 更新依赖文件，删除旧的不存在的依赖文件

废话

其实一个好的机制不单单在这个领域有所建树，这种思惟咱们能够扩展到多个方面，感谢大佬文章学习，去拜源码去了。