webpack熱更新的原理及實現(xiàn)

更新時間：2024年06月18日 09:37:54 作者：劍九六千里

本文主要介紹了webpack熱更新的原理及實現(xiàn),,無需完全刷新整個頁面的同時,更新代碼變動的模塊,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

刷新分為兩種：一種是頁面刷新，不保留頁面狀態(tài)，就是簡單粗暴，直接window.location.reload()；另一種只需要局部刷新頁面上發(fā)生變化的模塊，同時可以保留當前的頁面狀態(tài)，比如復選框的選中狀態(tài)、輸入框的輸入等。

Webpack熱更新（ Hot Module Replacement，簡稱 HMR，后續(xù)均以 HMR 替代），無需完全刷新整個頁面的同時，更新代碼變動的模塊，是 Webpack 內(nèi)置的最有用的功能之一。

HMR 的好處，在日常開發(fā)工作中體會頗深：節(jié)省寶貴的開發(fā)時間、提升開發(fā)體驗。引用官網(wǎng)的描述來概述一下：

HMR 功能會在應用程序運行過程中，替換、添加或刪除模塊，而無需重新加載整個頁面。主要是通過以下幾種方式，來顯著加快開發(fā)速度：

保留在完全重新加載頁面期間丟失的應用程序狀態(tài)。
只更新變更內(nèi)容，以節(jié)省寶貴的開發(fā)時間。
在源代碼中對 CSS / JS 進行修改，會立刻在瀏覽器中進行更新，這幾乎相當于在瀏覽器 devtools 直接更改樣式。

1. 熱更新原理

Webpack 的熱模塊替換（Hot Module Replacement，HMR）是一種在不完全刷新頁面的情況下更新應用代碼的技術，從而提高了開發(fā)效率。以下是 HMR 的核心原理：

步驟	描述
1	開發(fā)者使用 `webpack-dev-server` 啟動本地開發(fā)服務器，提供靜態(tài)文件服務并支持 `WebSocket` 實時通信。
2	`webpack-dev-server` 構建應用時，在輸出的 `JavaScript` 文件中注入 `HMR` 運行時代碼，處理更新通知。
3	Webpack 配置 `watch` 模式，監(jiān)聽源代碼文件變化，發(fā)現(xiàn)變化后開始重新編譯。
4	編譯完成，新模塊版本生成并存儲在內(nèi)存，啟用 `HMR` 時不刷新頁面，準備更新包。
5	通過 `WebSocket` 長連接，`webpack-dev-server` 通知客戶端哪些模塊有更新。
6	`HMR` 運行時嘗試應用更新，調用模塊的 `HMR` 接口，替換舊模塊實例（若支持）。
7	模塊可接受或拒絕更新，有副作用則拒絕并提示手動刷新。
8	更新失敗，`Webpack` 運行時回滾到之前狀態(tài)，避免應用崩潰。
9	對于不支持 `HMR` 或無法更新的模塊，開發(fā)者可選擇手動刷新頁面。

2. 熱更新配置

啟用 webpack 的模塊熱替換特性：

webpack.config.js

module.exports = {
  //...
  devServer: {
    hot: true,
  },
};

通過命令行使用:

npx webpack serve --hot

如需禁用：

npx webpack serve --no-hot

啟用模塊熱替換功能，在構建失敗時不刷新頁面作為回退，使用 hot: 'only'：

webpack.config.js

module.exports = {
  //...
  devServer: {
    hot: 'only',
  },
};

通過命令行使用：

npx webpack serve --hot only

提示
從 webpack-dev-server v4 開始，HMR 是默認啟用的。它會自動應用 webpack.HotModuleReplacementPlugin，這是啟用 HMR 所必需的。因此當 hot 設置為 true 或者通過 CLI 設置 --hot，你不需要在你的 webpack.config.js 添加該插件。