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

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

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

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

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

1. 熱更新原理

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

2. 熱更新配置

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

webpack.config.js

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

通過(guò)命令行使用:

npx webpack serve --hot

如需禁用：

npx webpack serve --no-hot

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

webpack.config.js

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

通過(guò)命令行使用：

npx webpack serve --hot only

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

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