webpack熱替換原理

基本概念

Hot Module Replacement（如下簡稱 HMR）是 webpack 發展至今引入的最使人興奮的特性之一 ，當你對代碼進行修改並保存後，webpack 將對代碼從新打包，並將新的模塊發送到瀏覽器端，瀏覽器經過新的模塊替換老的模塊，這樣在不刷新瀏覽器的前提下就可以對應用進行更新。例如，在開發 Web 頁面過程當中，當你點擊按鈕，出現一個彈窗的時候，發現彈窗標題沒有對齊，這時候你修改 CSS 樣式，而後保存，在瀏覽器沒有刷新的前提下，標題樣式發生了改變。感受就像在 Chrome 的開發者工具中直接修改元素樣式同樣。

WDS和瀏覽器的EventSource通訊

webpack-dev-server簡稱WDS,WDS啓動後會與瀏覽器創建websocket連接。當服務器資源變換並從新編譯後，會發送消息到瀏覽器端，若是沒有配置熱替換，則瀏覽器會刷新。

配置熱替換

vue項目中，咱們只用在devServer中設置hot爲true來開啓熱替換便可，以後的vue-loader會幫咱們配置。那若是不是vue項目，如何手動配置熱替換呢
一、webpack配置項修改

//...
devServer:{
    //...
    hot:true//啓動熱替換
},
//...
plugins:[
    //...
    new webpack.HotModuleReplacementPlugin()//加入熱替換插件
]

二、打包文件內配置
在你須要啓動熱替換的位置添加以下代碼，好比你在入口文件index.js中添加熱替換，那麼每一個模塊變化都會觸發熱替換

//index.js
import {logToScreen} from './util.js'
logToScreen()
if(module.hot){
  module.hot.decline()//當index.js自身變換時不觸發熱替換而是直接刷新頁面，根據狀況添加這項配置
  module.hot.accept()//也能夠只監聽util.js的更新而觸發熱替換，那麼就這樣配置：module.hot.accept(['./util.js'])
}

熱替換原理

1. Webpack編譯期，爲須要熱更新的 entry 注入熱更新代碼(EventSource通訊)
2. 頁面首次打開後，服務端與客戶端經過 EventSource 創建通訊渠道，把下一次的 hash 返回前端
3. 客戶端獲取到hash，這個hash將做爲下一次請求服務端 hot-update.js 和 hot-update.json的hash
4. 修改頁面代碼後，Webpack 監聽到文件修改後，開始編譯，編譯完成後，發送 build 消息給客戶端
5. 客戶端獲取到hash，成功後客戶端構造hot-update.js script連接，而後插入主文檔
6. hot-update.js 插入成功後，執行hotAPI 的 createRecord 和 reload方法，獲取到 Vue 組件的 render方法，從新 render 組件， 繼而實現 UI 無刷新更新。