1、什么是HMR

通过webpack-dev-server自动打包并没有真正的放到指定的目录中，因为读写磁盘是非常耗时和消耗性能的,所以为了提升性，webpack-dev-server将转换好的内容直接放到了内存中。
通过webpack-dev-server可以实现实时监听打包内容的变化,每次打包之后都会自动刷新网页, 但是正是因为每当内容被修改时都会自动刷新网页。
HMR(HotModuleReplacementPlugin)热更新插件,会在内容发生改变的时候时时的更新修改的内容但是不会重新刷新网站。

2、HMR使用:

HotModuleReplacementPlugin是一个内置插件, 所以不需要任何安装直接引入webpack模块即可使用。
①　在devServer中开启热更新

hot: true, //开启热更新
hotOnly: true, //即使热更新不生效，浏览器也不自动刷新

②　在webpack.config.js中创建热更新插件

new Webpack.HotModuleReplacementPlugin()

(3)热更新处理css:
如果是通过style-loader来处理CSS, 那么经过前面两步就已经实现了热更新。
如果是通过MiniCssExtractPlugin.loader来处理CSS, 那么还需要额外配置MiniCssExtractPlugin.loader。

 {loader: MiniCssExtractPlugin.loader,options: {hmr: true,  //开启热更新},},

(4)webpack-HMR-热更新处理JS
①　JS模块如何实现热更新?
手动监听模块变化：

if(module.hot){ // 判断是否开启热更新module.hot.accept("./test.js", function () { // 监听指定JS模块变化});
}

手动编写模块变化后的业务逻辑：

if(module.hot){module.hot.accept("./test.js", function () {let div = document.querySelector("div");console.log(div);document.body.removeChild(div);copy();});
}

webpack-HMR-热更新相关推荐

webpack 4 热更新后台成功更新浏览器不刷新
上一篇文章写的是 webpack4 打包,但是每次修改代码都要重新执行一次打包命令,实在是麻烦,本文将推出我的实现,仅做参考!!! 1.安装 webpack-dev-server npm instal ...
webpack中的HMR(热更新)原理剖析
简介 Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模 ...
hmr webpack 不编译_webpack - hmr热更新
文章首发于个人blog,欢迎关注~ webpack hmr webpack-dev-server 在使用 webpack-dev-server 的过程中,如果指定了 hot 配置的话(使用 inlin ...
hmr webpack 不编译_Webpack HMR 热更新实现原理深入分析
概述在使用 Webpack 构建开发期时,Webpack 提供热更新功能为开发带来良好的体验和开发效率,那热更新机制是怎么实现的呢? 代码实现 Webpack 配置添加 HotModuleRepla ...
webpack 的热更新是如何做到的？原理是什么？
Hot Module Replacement,简称 HMR,在不需要刷新整个页面的同时更新模块,能够提升开发的效率和体验.热更新时只会局部刷新页面上发生了变化的模块,同时可以保留当前页面的状态,比如复 ...
webpack (九) -热更新——浏览器不刷新，更新打包后的结果
17-webpack-热更新--浏览器不刷新,更新打包后的结果实现浏览器不刷新,更新打包后的结果,默认对js不生效,对样式生效. https://www.webpackjs.com/guides/h ...
vite hmr热更新
1.请确保用一个条件语句守护所有 HMR API 的使用,这样代码就可以在生产环境中被 tree-shaking 优化:if (import.meta.hot) {// HMR 代码}2.hmr相关a ...
macOS端React的项目WebPack热更新（HMR）失效问题分析及解决，原因竟是Windows文件系统不区分大小写导致
项目场景: 最近做的项目是一个使用UmiJS搭建的React的前端老项目,项目是上一个开发团队遗留下来的老项目,我们接着在原来的基础上开发.团队成员中有的是Windows电脑,有的是Mac电脑,所以存 ...
vue init webpack缺少标识符_Vue脚手架热更新技术探秘
前言热替换(Hot Module Replacement)或热重载(Hot Reload)是指在不停机状态下,实时更新,在前端利于来说,在各大框架中及库中都有体现,比如NG从5开始就提供了热更新,R ...
webpack 热更新
本节我们学习 webpack 的模块热更新,也可以叫做模块热替换.其目的是为了加快用户的开发速度,提高编程体验,方便开发人员在不刷新页面的情况下,就能修改代码,并且直观地在页面上看到变化.这个功能主要 ...

webpack-HMR-热更新

1、什么是HMR

2、HMR使用:

webpack-HMR-热更新相关推荐

最新文章

热门文章