快捷導(dǎo)航

webpack配置完熱更新會(huì)刷新整個(gè)頁(yè)面

更新時(shí)間：2023年11月27日 09:45:45 作者：程序員超超

本文主要介紹了webpack配置完熱更新會(huì)刷新整個(gè)頁(yè)面,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

可以在webpack文檔中找到有關(guān)熱更新的詳細(xì)信息，意思就是，開(kāi)啟熱更新之后，整個(gè)頁(yè)面你改了哪里，就只更新哪里，其他沒(méi)變的，或者保存在緩存里面的內(nèi)容，都不會(huì)改變，感謝很神奇！很方便！直接寫個(gè)demo測(cè)試一下。

index.html

<!DOCTYPE html>
<html lang="zn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>document</title>
  </head>
  <body>
     <div id="app"></div>
  </body>
</html>

bootstrap.js

import "./index.js";

index.js

let oContainer = document.getElementById("app");

let oDiv1 = document.createElement("div");
let oDiv2 = document.createElement("div");

let count = 0;
let a = "1111";
oDiv1.innerHTML = count;

oDiv1.onclick = () => {
  count++;
  oDiv1.innerHTML = count;
};
oDiv2.innerHTML = a;

oContainer.innerHTML = ''
oContainer.appendChild(oDiv1);
oContainer.appendChild(oDiv2);

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
  entry: "./bootstrap.js",
  mode: "development",
  devServer: {
    static: "./dist",
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

package.json

{
  "name": "webpackdevservertest",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "html-webpack-plugin": "^5.5.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

注意這里的devServer配置了hot: true，webpack5已經(jīng)自動(dòng)幫我們引入了webpack.HotModuleReplacementPlugin，所以這里只設(shè)置hot: true就可以熱更新了。

接下來(lái)我們來(lái)測(cè)試一下，執(zhí)行npm start，初始的count是0，a是1，我們點(diǎn)擊oDIv1讓他自增到2，然后修改a的值為11。然后保存代碼，查看頁(yè)面。如果這個(gè)時(shí)候oDIv1的值是2，oDiv2的值是11，那么就說(shuō)明熱更新配置成功了。但是很遺憾，oDIv1的值被重置為了0，熱更新沒(méi)生效。

經(jīng)過(guò)再次查看文檔，發(fā)現(xiàn)，熱更新其實(shí)是需要自己監(jiān)聽(tīng)module.hot.accept的。也就是說(shuō)webpack的熱更新并不是開(kāi)箱即用的，而是只是給我們提供了這樣一個(gè)鉤子。

例如改一下bootstrap.js的代碼

import "./index.js";

if (module.hot) {
  module.hot.accept("./index.js", () => {});
}

我監(jiān)聽(tīng)了index.js的文件變化。然后再次更改，雖然值還是會(huì)被重置。但是頁(yè)面沒(méi)有刷新，頁(yè)面是否刷新，大家可以看一下當(dāng)前tab頁(yè)每次更新完是否會(huì)轉(zhuǎn)圈，如果沒(méi)有轉(zhuǎn)圈，就說(shuō)明沒(méi)有刷新頁(yè)面，而至于各種狀態(tài)如何保持之前狀態(tài)，需要大家自己在module.hot.accept中自行編寫對(duì)應(yīng)邏輯。這也說(shuō)明了無(wú)論是vue，還是react都有自己自帶的熱更新的loader或者plugins。

最后總結(jié)一下，webpack的熱更新并不是開(kāi)箱即用的，而是需要再webpack提供的module.hot.accept函數(shù)中，自行實(shí)現(xiàn)對(duì)應(yīng)的熱更新之后的邏輯。

到此這篇關(guān)于webpack配置完熱更新會(huì)刷新整個(gè)頁(yè)面的文章就介紹到這了,更多相關(guān)webpack 熱更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: