webpack的熱更新是如何做到的？說明其原理？

webpack的熱更新又稱熱替換（Hot Module Replacement），縮寫為HMR。 這個機制可以做到不用刷新瀏覽器而將新變更的模塊替換掉舊的模塊。

原理：

首先要知道server端和client端都做了處理工作

1. 第一步，在 webpack 的 watch 模式下，文件系統中某一個文件發生修改，webpack 監聽到文件變化，根據配置文件對模塊重新編譯打包，並將打包後的代碼通過簡單的 JavaScript 對象保存在內存中。
2. 第二步是 webpack-dev-server 和 webpack 之間的接口交互，而在這一步，主要是 dev-server 的中間件 webpack-dev-middleware 和 webpack 之間的交互，webpack-dev-middleware 調用 webpack 暴露的 API對代碼變化進行監控，並且告訴 webpack，將代碼打包到內存中。
3. 第三步是 webpack-dev-server 對文件變化的一個監控，這一步不同於第一步，並不是監控代碼變化重新打包。當我們在配置文件中配置了devServer.watchContentBase 為 true 的時候，Server 會監聽這些配置文件夾中靜態文件的變化，變化後會通知瀏覽器端對應用進行 live reload。註意，這兒是瀏覽器刷新，和 HMR 是兩個概念。
4. 第四步也是 webpack-dev-server 代碼的工作，該步驟主要是通過 sockjs（webpack-dev-server 的依賴）在瀏覽器端和服務端之間建立一個 websocket 長連接，將 webpack 編譯打包的各個階段的狀態信息告知瀏覽器端，同時也包括第三步中 Server 監聽靜態文件變化的信息。瀏覽器端根據這些 socket 消息進行不同的操作。當然服務端傳遞的最主要信息還是新模塊的 hash 值，後面的步驟根據這一 hash 值來進行模塊熱替換。
5. webpack-dev-server/client 端並不能夠請求更新的代碼，也不會執行熱更模塊操作，而把這些工作又交回給了 webpack，webpack/hot/dev-server 的工作就是根據 webpack-dev-server/client 傳給它的信息以及 dev-server 的配置決定是刷新瀏覽器呢還是進行模塊熱更新。當然如果僅僅是刷新瀏覽器，也就沒有後面那些步驟了。
6. HotModuleReplacement.runtime 是客戶端 HMR 的中樞，它接收到上一步傳遞給他的新模塊的 hash 值，它通過 JsonpMainTemplate.runtime 向 server 端發送 Ajax 請求，服務端返回一個 json，該 json 包含了所有要更新的模塊的 hash 值，獲取到更新列表後，該模塊再次通過 jsonp 請求，獲取到最新的模塊代碼。這就是上圖中 7、8、9 步驟。
7. 而第 10 步是決定 HMR 成功與否的關鍵步驟，在該步驟中，HotModulePlugin 將會對新舊模塊進行對比，決定是否更新模塊，在決定更新模塊後，檢查模塊之間的依賴關系，更新模塊的同時更新模塊間的依賴引用。
8. 最後一步，當 HMR 失敗後，回退到 live reload 操作，也就是進行瀏覽器刷新來獲取最新打包代碼。

webpack的熱更新