webpack配置完热更新会刷新整个页面
可以在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已经自动帮我们引入了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函数中，自行实现对应的热更新之后的逻辑。
到此这篇关于webpack配置完热更新会刷新整个页面的文章就介绍到这了,更多相关webpack 热更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现，本文有利于巩固你js与css方面的知识，感兴趣的你可以了解下哦，希望本文对你有所帮助2013-01-01
这篇文章主要介绍了微信小程序—setTimeOut定时器的问题及解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
namespace即“命名空间”，也称“名称空间” 、”名字空间”。接下来通过本文给大家介绍JavaScript中命名空间namespace模式的相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
这篇文章主要介绍了JavaScript模板引擎原理与用法,结合实例形式详细分析了javascript模版引擎相关概念、原理、定义及使用方法,需要的朋友可以参考下2018-12-12
js动态添加input按钮并给按钮增加onclick的函数事件(带参数)完整实例
这篇文章主要介绍了js动态添加input按钮并给按钮增加onclick的函数事件,结合完整实例形式分析了javascript页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2023-07-07
这篇文章介绍了javascript中直接写php代码的方法，有需要的朋友可以参考一下2013-07-07
本篇文章主要介绍了springmvc 接收json对象的两种方式，具有一定的参考价值，有需要的可以了解一下。2016-12-12
这篇文章主要介绍了layui中layer前端组件实现图片显示功能的方法,结合实例形式分析了layui中layer组件调用图片显示功能的操作方法与相关注意事项,并提供了layer与layui源码下载,需要的朋友可以参考下2017-10-10
最近发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug。所以这篇文章主要给大家介绍了关于js中this的指向问题的相关资料，需要的朋友可以参考下2018-11-11
这篇文章主要给大家介绍了关于unapp微信小程序转发分享及携带参数的2种方式,我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能,需要的朋友可以参考下2023-11-11
最新评论