騰訊云服務器學生濟南seo排行榜
可以在webpack文檔中找到有關熱更新的詳細信息，意思就是，開啟熱更新之后，整個頁面你改了哪里，就只更新哪里，其他沒變的，或者保存在緩存里面的內容，都不會改變，感謝很神奇！很方便！直接寫個demo測試一下。
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)自動幫我們引入了webpack.HotModuleReplacementPlugin，所以這里只設置hot: true就可以熱更新了。
接下來我們來測試一下，執(zhí)行npm start，初始的count是0，a是1，我們點擊oDIv1讓他自增到2，然后修改a的值為11。然后保存代碼，查看頁面。如果這個時候oDIv1的值是2，oDiv2的值是11，那么就說明熱更新配置成功了。但是很遺憾，oDIv1的值被重置為了0，熱更新沒生效。
經(jīng)過再次查看文檔，發(fā)現(xiàn)，熱更新其實是需要自己監(jiān)聽module.hot.accept的。也就是說webpack的熱更新并不是開箱即用的，而是只是給我們提供了這樣一個鉤子。
例如改一下bootstrap.js的代碼
import "./index.js";if (module.hot) {module.hot.accept("./index.js", () => {});
}
我監(jiān)聽了index.js的文件變化。然后再次更改，雖然值還是會被重置。但是頁面沒有刷新，頁面是否刷新，大家可以看一下當前tab頁每次更新完是否會轉圈，如果沒有轉圈，就說明沒有刷新頁面，而至于各種狀態(tài)如何保持之前狀態(tài)，需要大家自己在module.hot.accept中自行編寫對應邏輯。這也說明了無論是vue，還是react都有自己自帶的熱更新的loader或者plugins。
最后總結一下，webpack的熱更新并不是開箱即用的，而是需要再webpack提供的module.hot.accept函數(shù)中，自行實現(xiàn)對應的熱更新之后的邏輯。