世界杯2022是哪个国家_国足世界杯出线 - dtfyjq.com

可以在webpack文档中找到有关热更新的详细信息，意思就是，开启热更新之后，整个页面你改了哪里，就只更新哪里，其他没变的，或者保存在缓存里面的内容，都不会改变，感谢很神奇！很方便！直接写个demo测试一下。

index.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已经自动帮我们引入了webpack.HotModuleReplacementPlugin，所以这里只设置hot: true就可以热更新了。

接下来我们来测试一下，执行npm start，初始的count是0，a是1，我们点击oDIv1让他自增到2，然后修改a的值为11。然后保存代码，查看页面。如果这个时候oDIv1的值是2，oDiv2的值是11，那么就说明热更新配置成功了。但是很遗憾，oDIv1的值被重置为了0，热更新没生效。

经过再次查看文档，发现，热更新其实是需要自己监听module.hot.accept的。也就是说webpack的热更新并不是开箱即用的，而是只是给我们提供了这样一个钩子。

例如改一下bootstrap.js的代码

import "./index.js";

if (module.hot) {

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

}

我监听了index.js的文件变化。然后再次更改，虽然值还是会被重置。但是页面没有刷新，页面是否刷新，大家可以看一下当前tab页每次更新完是否会转圈，如果没有转圈，就说明没有刷新页面，而至于各种状态如何保持之前状态，需要大家自己在module.hot.accept中自行编写对应逻辑。这也说明了无论是vue，还是react都有自己自带的热更新的loader或者plugins。

最后总结一下，webpack的热更新并不是开箱即用的，而是需要再webpack提供的module.hot.accept函数中，自行实现对应的热更新之后的逻辑。