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