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

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

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

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

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

1. 熱更新原理

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

2. 熱更新配置

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

webpack.config.js

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

通過命令行使用:

npx webpack serve --hot

如需禁用：

npx webpack serve --no-hot

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

webpack.config.js

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

通過命令行使用：

npx webpack serve --hot only

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

到此這篇關(guān)于webpack熱更新的原理及實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)webpack熱更新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評論