webpack配置完热更新之后还是会刷新整个页面

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

index.html

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

javascript 复制代码
import "./index.js";

index.js

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

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

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的代码

javascript 复制代码
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函数中,自行实现对应的热更新之后的逻辑。

相关推荐
Nan_Shu_61419 分钟前
Web前端面试题(2)
前端
知识分享小能手26 分钟前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光2 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5202 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20502 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端2 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉2 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~2 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js