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通信显示文件内容。

流程图表分析: