模块热替换(hot module replacement)

块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度:
保留在完全重新加载页面时丢失的应用程序状态。
只更新变更内容,以节省宝贵的开发时间。
调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
这一切是如何运行的?

开头引入
webpack自带模块热替换插件(hot module replacement)所以要先引入webpack
在这里插入图片描述

const webpack = require('webpack'); //webpack自带模块热替换插件(hot module replacement)所以要先引入webpack

2. devServer引入
在这里插入图片描述
3.插件中引入
在这里插入图片描述

new webpack.HotModuleReplacementPlugin() //热替换插件


**js热替换**--
js热替换需要对更新文件以下操作,不然浏览器不会因为js文件改变从而重新渲染, 如下图所示,要对number.js进行操作 要加上此代码
if(module.hot) {
	module.hot.accept('./number', () => {
		document.body.removeChild(document.getElementById('number'));
		number();
	})
}

accept接受给定依赖模块的更新,并触发一个 回调函数 来对这些更新做出响应。
参数为更新的JS文件

在这里插入图片描述
css热更新则不需要这样配置,因为CSS-loader中已经帮我们配置了此代码,而JS中却需要我们自身自己去编写此代码来配

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值