可以在webpack文档中找到有关热更新的详细信息,意思就是,开启热更新之后,整个页面你改了哪里,就只更新哪里,其他没变的,或者保存在缓存里面的内容,都不会改变,感谢很神奇!很方便!直接写个demo测试一下。
<!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>
import "./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);
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./bootstrap.js",
mode: "development",
devServer: {
static: "./dist",
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
}),
],
};
{
"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的热更新并不是开箱即用的,而是只是给我们提供了这样一个钩子。
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
函数中,自行实现对应的热更新之后的逻辑。
原文地址:https://blog.csdn.net/weixin_45609589/article/details/134600564
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_29132.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!