Webpack 自動刷新和HMR

最近想了解一下webpack的功能，基於如今的4.x版本，過了一遍官方文檔，內容實在太多，根本記不住...，不過發現了幾個有意思的擴展內容，HMR就是其中之一（另外一個是PWA的SW-Service Worker），因此就花點時間整理下

一、自動刷新

webpack.config配置參數devServer中存在inline參數，參數能夠設置devServer的兩種模式inline和iframe，默認使用inline

devServer: {
    contentBase: "./dist",
    // inline: false,
    hot: true,
},
複製代碼

官方是這樣描述inline模式的

Toggle between the dev-server's two different modes. By default the application will be served with inline mode enabled. This means that a script will be inserted in your bundle to take care of live reloading, and build messages will appear in the browser console.

大體意思是說在inline模式下，在bundle.js中會插入代碼來處理自動刷新，因爲沒看源碼，根據開關inline模式之後，webpack-dev-server啓動時候的控制檯輸出，和官方文檔說明，因此我的猜想，大體實現：

1. bundle.js插入socket的片斷，在瀏覽器加載後創建socket鏈接
2. 利用webpack -watch來監聽文件變化，發送socket信息告知瀏覽器，瀏覽器接受信息調用reload來實現刷新頁面刷新

經過分析瀏覽器請求（inline模式會在加載bundle.js後發起一個websocket請求）和bundle.js代碼確認了這一點(onSocketMsg-> reloadApp-> applyReload)，也就是說使用webpack-dev-server啓動就能夠開啓自動刷新功能了

2. HMR

HMR（Hot Module Replacement），添加、修改模塊（修改JS/CSS）後瀏覽器內容經過非刷新的方式自動更新，提升開發效率，要注意HMR只應在開發環境使用

HMR在配置成功之後，修改CSS/JS不會進行頁面刷新（注意保存文件變動的時候，瀏覽器Tab頁是不是自動刷新）

2.1 HMR配置

HMR配置有四個關鍵點：

1. 使用webpack-dev-server做爲服務器啓動
2. webpack.config的devServer中配置hot: true
3. webpack.config的plugins增長HotModuleReplacementPlugin
4. 使用module.hot.accept增長HMR代碼

webpack.config

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: {
    main: __dirname + '/app/main.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    contentBase: "./dist",//本地服務器所加載的頁面所在的目錄
    // inline: true, //實時刷新
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + '/app/index.tmpl.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
};
複製代碼

main.js

import './extra.js'
import './style.css'

if (module.hot) {
    module.hot.accept('./extra.js', function() {
      console.log('Accepting the updated printMe module!');
    })
    // 關閉指定子模塊的HMR
    // module.hot.decline('./extra.js')
}
複製代碼

extra.js

if(module.hot){
    // 監聽當前模塊HMR異常
    // module.hot.accept(() => {
    //     console.log('error handler')
    // })
    // 關閉當前模塊HMR
    // module.hot.decline()
    // 存儲模塊數據
    // module.hot.dispose(disposeHander)
    // if (module.hot.data) {
    //    console.log(module.hot.data.a)
    // }
    // 移除模塊數據
    // module.hot.removeDisposeHandler(disposeHander)
}
複製代碼

配置成功之後修改extra.js或者style.css保存，都會觸發HMR，控制檯會輸出[HMR]開頭的日誌

PS:

1. css文件咱們會配置style-loader，style-loader中已經增長了module.hot.accept的支持，因此即便不配置module.hot.accept，對於css也能夠HMR，可是若是JS沒有調用module.hot.accept，HMR執行找不到對應的內容，則會直接刷新頁面，能夠設置參數hotOnly: true來防止自動刷新

2. webpack plugins未添加HotModuleReplacementPlugin使用hot: true的時候會報錯 Uncaught Error: [HMR] Hot Module Replacement is disabled.

3. 官網配置分爲Node版本和Web版本，因爲本身也瞭解不深，因此不探討Node版本如何使用webpack的HMR

2.2 使用HMR API

要想使用HMR，須要利用到HMR的API，在添加了HotModuleReplacementPlugin模塊後，就可使用module.hot的API

Module API

用於模塊處理的API

2.2.1 accept

module.hot.accept(dependencies,callback)：添加須要HMR的模塊，以及觸發變動後的回調，dependencies支持字符串或者字符串數組

module.hot.accept(errorHandler):被添加的模塊內部使用能夠捕獲HMR異常時候拋出的異常

2.2.2 decline

module.hot.decline(dependencies)：和accept操做相反，標記一個不須要HMR管理的模塊

module.hot.decline()：JS模塊中使用，將致使該模塊沒法被HMR

2.2.3 dispose

module.hot.addDisposeHandler/moduel.hot.dispose(data =>{})：即便使用HMR，每次更新後數據是不能進行保留的，若是想將數據傳遞給更新後的模塊，使用dispose對全局對象data賦值，以後能夠經過module.hot.data來獲取

module.hot.removeDisposeHandler(callback)：移除經過dispose和addDisposeHandler添加的回調，移除後module.hot.data將變爲空對象{}(調用dispose以前module.hot.data是undefined)

Management API

用於HMR狀態管理的API

2.2.4 status

module.hot.status(): HMR過程是存在變化狀態的，經過該函數來獲取到HMR的當前狀態

2.3 vue-cli3配置HMR

使用vue-cli3構建，經過vue-cli-service serve啓動的項目，其自己會添加HMR，在vue.config.js的devServer中配置hot: false能夠關閉。

可是項目中發現一個狀況，當配置了https: true之後，必須指定host: localhost，HMR功能才能夠開啓，不然HMR功能將失效（實際上是整個自動更新功能都失效了，不會發起socket請求），而在webpack中並無出現該狀況。

據此揣測，vue-cli-service在使用https: true的時候，socket連接必須指定使用hostname才能夠進行構建，根據查找bundle.js代碼，確認該邏輯（能夠在bundle.js查找socket關鍵字，能夠看到hostname相關檢測邏輯）。

三、HMR實現

3.1 工做原理

本小節內容都不是人話，可跳過～

1、應用程序（Applicationn）:

1. 應用程序在獲取到socket服務器發送的更新信息
2. 檢查HMR的運行狀態
3. HMR運行環境異步下載更新內容並通知應用程序
4. 應用程序告訴HMR運行環境去應用更新
5. HMR運行環境應用變動信息

2、編譯部分（Compiler）：

修改文件之後，編譯器觸發更新操做，更新兩部份內容：manifest和chunks

manifest包含了新的變化的全部模塊的代碼塊，編譯器確保module IDs和chunk IDs在本次構建中

3、模塊（Module）

隻影響HMR中包含了的模塊(module.hot.accept())，好比：style-loader，其中實現了HMR接口，因此在樣式更新的時候，新樣式替換老樣式

若是模塊沒有HMR的處理，則更新操做持續冒泡，也就是模塊樹中只要單個模塊發生了更新，整個都會從新加載

4、運行過程（Runtime）

運行過程會持續使用check和apply來進行module.hot.staus的更新

check: 請求更新清單，請求成功後，比較更新的內容和當前的內容，將全部更新的內容進行存儲直到全部內容更下載完成，切換到ready狀態準備

apply: 將updated的模塊標記爲invalid，一直冒泡標記到entry point，全部無效模塊處理完成後，更新全部的accept 的handlers都會被觸發，而後狀態切換爲idle狀態

3.2 原理解析

查看bundle.js中的代碼，將3.1中的內容翻譯一下：

1. 在webpack-dev-server配置了hot:true的基礎上，bundle.js中的reloadApp()會進行HMR的邏輯（另外一個邏輯是以前面的自動刷新），這個時候會開始判斷HMR的status，併發起一個AJAX請求chunk.hot-update.json，該請求會返回一個JSON對象

{
    c: {
        main: true
    },
    h: nextChunk
}
複製代碼

2. 請求成功之後，繼續更新HMR的status，會比較返回的nextChunk和當前的chunk是否相同，若是相同結束HMR，若是不一樣將nextChunk存儲並繼續進行HMR
3. 根據chunk拼接<script>的src，並將<script>動態插入html的<head>中（好比個人配置就是：main.chunk.hot-update.js），操做後chunk數組序號+1
4. 因爲<head>插入了新的腳本<script src="main.chunk.hot-update.js"></script>，實現動態更新JS而不刷新頁面

補充：對於添加了module.hot.dispose的部分，建立了全局對象data={}來保存數據，從而實現從新加載JS之後，仍然能夠訪問該數值的內容

3. 總結

HMR的核心點有兩個：

1. 如何在服務端文件變化以後通知客戶端？使用socket
2. 如何判斷文件是否發生變化？客戶端和服務端都保存chunk，比較是否發生變化

webpack的內容其實真的有點多，僅僅HMR包含的內容就不少，本身的總結也不夠完整，只能說是恰好入門。不過整個過程一邊本身猜測，一遍跟源碼，而後驗證本身猜測，真的是頗有意思的過程。

4. 參考

webpack官方文檔：

HMR

HMR API

Dev Server

CSDN上一篇特別棒的資料：

完全弄懂webpack-dev-server的熱更新