現(xiàn)在前端腳手架盛行，直接集成了包管理和打包工具，目前最流行的打包工具依然是webpack阵翎。當你起了dev-server之后，會自動打包和熱更新之剧，幫你快速開發(fā)郭卫。但其相關原理估計很多人并不知曉。本文淺析其熱更新原理背稼》【基礎用法和相關概念移步：https://webpack.js.org/
webpack的熱更新需要依賴一個插件HotModelReplacement.
因為webpack打包后的bundle.js文件并不具備熱更新的能力，HMR插件將HMR Runtime注入到bundle.js中蟹肘，使bundle.js可以HMR Server建立webSocket通信谓形。webSocket后續(xù)會寫一個庫扔到npm灶伊；
代碼到客戶端:
1,text editor 進行編寫代碼；
2,生成file文件寒跳，扔給webpack處理;
3,webpack compiler在服務端進行編譯打包成bundle.js文件;
4,通過Bundle Server將bundle.js在瀏覽器（客戶端）中訪問;
此刻HRM已經(jīng)把HMR Runtime工具注入到bundle.js中可以與服務端的HMR Server進行websocket通信了
5,當編譯后的文件進行改變之后聘萨，HMR Server將變化的文件傳輸給HMR Runtime。
6,HMR Runtime把更改的文件注入到瀏覽器中童太，websocket通信顯示文件內(nèi)容米辐。
流程圖表分析:
