webpack配置完热更新会刷新整个页面

更新时间：2023年11月27日 09:45:45 作者：程序员超超

本文主要介绍了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 热更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

原生JS实现导航下拉菜单效果
这篇文章主要介绍了JS实现导航下拉菜单效果，用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
详解Javascript中new()到底做了些什么？
javascript中，new操作符的工作原理是什么?它是怎样改变构造函数的返回值和this指向的？下面这篇文章就来给大家介绍了关于Javascript中new()到底做了些什么的相关资料，需要的朋友可以参考下。
2018-03-03
微信小程序实现单列下拉菜单效果
这篇文章主要介绍了微信小程序单列下拉菜单，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
js中eval()函数和trim()去掉字符串左右空格应用
对于js中eval()函数的理解和写一个函数trim()去掉字符串左右空格;对于js中eval()函数的理解是本人心得不一定正确,感兴趣的朋友参考下，或许对你学习eval()函数有所帮助
2013-02-02
如何写出一个惊艳面试官的JavaScript深拷贝
浅拷贝是面试中经常会被问到的问题,这篇文章主要给大家介绍了关于如何写出一个惊艳面试官的JavaScript深拷贝的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
uniapp实现滑动评分效果
这篇文章主要为大家详细介绍了uniapp实现滑动评分效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
JS实现验证码倒计时的注册页面
这篇文章给大家分享一段实例代码发送验证码之后开始60S倒计时功能，具体实例代码大家参考下本文
2018-01-01
JavaScript中跨域调用Flash的方法
这篇文章主要介绍了JavaScript中跨域调用Flash的方法,只需要在Flash中加一句话即可,需要的朋友可以参考下
2014-08-08
webpack打包进度展示以及美化教程
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),下面这篇文章主要给大家介绍了关于webpack打包进度展示以及美化的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01
JavaScript获取一个范围内日期的方法
这篇文章主要介绍了JavaScript获取一个范围内日期的方法,涉及javascript操作日期的相关技巧,需要的朋友可以参考下
2015-04-04