理解 webpack 熱更新

一、開啓：HotModuleReplacementPlugin/--hot

二、webpack 編譯構建後，控制檯出現：

1、新的 hash 值 // 作爲下次熱更新的標識

2、新的 json 文件 // h 代表新 hash，c 代表要熱更新的模塊

3、新的 js 文件 // 本次修改後的代碼

三、熱更新實現原理：

1、啓動 webpack 生成 compiler 實例，compiler 上有很多方法，例如監聽本地文件的變化

2、使用 express 框架啓動本地 server，讓瀏覽器可以請求本地的靜態資源

3、啓動 websocket 服務，當本地文件發生變化，可以立即告知瀏覽器可以熱更新代碼

四、啓動本地服務前在入口增加兩個文件

1、獲取 websocket 客戶端代碼

2、根據配置獲取 webpack 熱更新代碼路徑

五、過程：

1、監聽 webpack 編譯結束，通過 websocket 給瀏覽器發送通知，ok 和 hash 事件，瀏覽器拿到最新的 hash 值做更新檢查邏輯

2、webpack-deb-server 主要職責：啓動服務和前置準備工作

3、webpack-dev-middleware 主要職責：本地文件的編譯和輸出以及監聽

4、瀏覽器接收到通知，hash 事件：更新最新一次打包後的 hash 值。ok 事件：進行熱更新檢查

5、利用上一次保存的 hash 值，發送 xxx/hash.hot-update.json 的 ajax 請求，獲取熱更新模塊

6、通過 jsonp 方式發送 xxx/hash.hot-update.js 請求，使用 jsonp 可以直接執行代碼，更新代碼，而不用刷新頁面更新。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/yRha4AesO4j0XTCE-_SZzA