Webpack熱更新的原理是什么

本篇內(nèi)容介紹了“Webpack熱更新的原理是什么”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、是什么

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

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

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

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

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

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

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

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

我們需要去指定哪些模塊發(fā)生更新時進(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í)時更新文件變化

上面圖中，可以分成兩個階段：

• 啟動階段為上圖 1 - 2 - A - B

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

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

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

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

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

在瀏覽器接受到這條消息之前，瀏覽器已經(jīng)在上一次socket 消息中已經(jīng)記住了此時的hash 標(biāo)識，這時候我們會創(chuàng)建一個 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)建兩個服務(wù)器：提供靜態(tài)資源的服務(wù)(express)和Socket服務(wù)

• express server 負(fù)責(zé)直接提供靜態(tài)資源的服務(wù)(打包后的資源直接被瀏覽器請求和解析)

• socket server 是一個 websocket 的長連接，雙方可以通信

• 當(dāng) socket server 監(jiān)聽到對應(yīng)的模塊發(fā)生變化時，會生成兩個文件.json(manifest文件)和.js文件(update  chunk)

• 通過長連接，socket server 可以直接將這兩個文件主動發(fā)送給客戶端(瀏覽器)

• 瀏覽器拿到兩個新的文件后，通過HMR runtime機(jī)制，加載這兩個文件，并且針對修改的模塊進(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熱更新的原理是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！