webpack热更新原理

现在前端脚手架盛行,直接集成了包管理和打包工具,目前最流行的打包工具依然是webpack。当你起了dev-server之后,会自动打包和热更新,帮你快速开发。但其相关原理估计很多人并不知晓。本文浅析其热更新原理。基础用法和相关概念移步:https://webpack.js.org/

webpack的热更新需要依赖一个插件HotModelReplacement.

因为webpack打包后的bundle.js文件并不具备热更新的能力,HMR插件将HMR Runtime注入到bundle.js中,使bundle.js可以HMR Server建立webSocket通信。webSocket后续会写一个库扔到npm;

代码到客户端:

1,text editor 进行编写代码;

2,生成file文件,扔给webpack处理;

3,webpack compiler在服务端进行编译打包成bundle.js文件;

4,通过Bundle Server将bundle.js在浏览器(客户端)中访问;

此刻HRM已经把HMR Runtime工具注入到bundle.js中可以与服务端的HMR Server进行websocket通信了

5,当编译后的文件进行改变之后,HMR Server将变化的文件传输给HMR Runtime。

6,HMR Runtime把更改的文件注入到浏览器中,websocket通信显示文件内容。

流程图表分析:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容