本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。

大興網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

一、是什么

HMR全稱 Hot Module Replacement，可以理解為模塊熱替換，指在應(yīng)用程序運(yùn)行過程中，替換、添加、刪除模塊，而無需重新刷新整個(gè)應(yīng)用。

例如，我們在應(yīng)用運(yùn)行過程中修改了某個(gè)模塊，通過自動(dòng)刷新會導(dǎo)致整個(gè)應(yīng)用的整體刷新，那頁面中的狀態(tài)信息都會丟失

如果使用的是 HMR，就可以實(shí)現(xiàn)只將修改的模塊實(shí)時(shí)替換至應(yīng)用中，不必完全刷新整個(gè)應(yīng)用

在webpack中配置開啟熱模塊也非常的簡單，如下代碼：

 
 
 
 
  
  
  
  
const webpack = require('webpack') 
  
  
  
  
module.exports = { 
  
  
  
  
  // ... 
  
  
  
  
  devServer: { 
  
  
  
  
    // 開啟 HMR 特性 
  
  
  
  
    hot: true 
  
  
  
  
    // hotOnly: true 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 

通過上述這種配置，如果我們修改并保存css文件，確實(shí)能夠以不刷新的形式更新到頁面中

但是，當(dāng)我們修改并保存js文件之后，頁面依舊自動(dòng)刷新了，這里并沒有觸發(fā)熱模塊

所以，HMR并不像 Webpack 的其他特性一樣可以開箱即用，需要有一些額外的操作

我們需要去指定哪些模塊發(fā)生更新時(shí)進(jìn)行HRM，如下代碼：

 
 
 
 
  
  
  
  
if(module.hot){ 
  
  
  
  
    module.hot.accept('./util.js',()=>{ 
  
  
  
  
        console.log("util.js更新了") 
  
  
  
  
    }) 
  
  
  
  
} 
 
 
 

二、實(shí)現(xiàn)原理

首先來看看一張圖，如下：

• Webpack Compile：將 JS 源代碼編譯成 bundle.js
• HMR Server：用來將熱更新的文件輸出給 HMR Runtime
• Bundle Server：靜態(tài)資源文件服務(wù)器，提供文件訪問路徑
• HMR Runtime：socket服務(wù)器，會被注入到瀏覽器，更新文件的變化
• bundle.js：構(gòu)建輸出的文件
• 在HMR Runtime 和 HMR Server之間建立 websocket，即圖上4號線，用于實(shí)時(shí)更新文件變化

上面圖中，可以分成兩個(gè)階段：

• 啟動(dòng)階段為上圖 1 - 2 - A - B

在編寫未經(jīng)過webpack打包的源代碼后，Webpack Compile 將源代碼和 HMR Runtime 一起編譯成 bundle文件，傳輸給Bundle Server 靜態(tài)資源服務(wù)器

• 更新階段為上圖 1 - 2 - 3 - 4

當(dāng)某一個(gè)文件或者模塊發(fā)生變化時(shí)，webpack監(jiān)聽到文件變化對文件重新編譯打包，編譯生成唯一的hash值，這個(gè)hash值用來作為下一次熱更新的標(biāo)識

根據(jù)變化的內(nèi)容生成兩個(gè)補(bǔ)丁文件：manifest(包含了 hash 和 chundId，用來說明變化的內(nèi)容)和chunk.js 模塊

由于socket服務(wù)器在HMR Runtime 和 HMR Server之間建立 websocket鏈接，當(dāng)文件發(fā)生改動(dòng)的時(shí)候，服務(wù)端會向?yàn)g覽器推送一條消息，消息包含文件改動(dòng)后生成的hash值，如下圖的h屬性，作為下一次熱更新的標(biāo)識

在瀏覽器接受到這條消息之前，瀏覽器已經(jīng)在上一次socket 消息中已經(jīng)記住了此時(shí)的hash 標(biāo)識，這時(shí)候我們會創(chuàng)建一個(gè) ajax 去服務(wù)端請求獲取到變化內(nèi)容的 manifest 文件

mainfest文件包含重新build生成的hash值，以及變化的模塊，對應(yīng)上圖的c屬性

瀏覽器根據(jù) manifest 文件獲取模塊變化的內(nèi)容，從而觸發(fā)render流程，實(shí)現(xiàn)局部模塊更新

三、總結(jié)

關(guān)于webpack熱模塊更新的總結(jié)如下：

• 通過webpack-dev-server創(chuàng)建兩個(gè)服務(wù)器：提供靜態(tài)資源的服務(wù)(express)和Socket服務(wù)
• express server 負(fù)責(zé)直接提供靜態(tài)資源的服務(wù)(打包后的資源直接被瀏覽器請求和解析)
• socket server 是一個(gè) websocket 的長連接，雙方可以通信
• 當(dāng) socket server 監(jiān)聽到對應(yīng)的模塊發(fā)生變化時(shí)，會生成兩個(gè)文件.json(manifest文件)和.js文件(update chunk)
• 通過長連接，socket server 可以直接將這兩個(gè)文件主動(dòng)發(fā)送給客戶端(瀏覽器)
• 瀏覽器拿到兩個(gè)新的文件后，通過HMR runtime機(jī)制，加載這兩個(gè)文件，并且針對修改的模塊進(jìn)行更新

參考文獻(xiàn)

• https://zhuanlan.zhihu.com/p/138446061
• https://github.com/Jocs/jocs.github.io/issues/15
• https://juejin.cn/post/6844904134697549832
• https://vue3js.cn/interview/

本文題目：面試官：說說Webpack的熱更新是如何做到的？原理是什么？
標(biāo)題來源：http://uogjgqi.cn/article/cdidgjj.html