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