前言
在webpack4和5中,配置devServer.hot:true,就会开启模块热加载。但是在官网的案例中,仍会配合一个
module.hot.accept使用。本文的目的就是对这个方法进行一个作用描述,最后将会阐述两个论点。
- 为什么要使用module.hot.accept
- 不使用它会有什么影响
一、webpack热更新机制
webpack的热更新就像事件冒泡一样,会从最里层的依赖一层一层向上触发。路径上所有依赖都会触发更新状态直到更新到浏览器上
二、module.hot.accept的作用
它允许我们在特定的依赖发生更新后,自主处理更新操作。
如果没有在文件中使用module.hot.accept,那么会默认走上面的更新机制
三、module.hot.accept 基本用法
基本用法
//判断是否开启热加载
if (module.hot) {
module.hot.accept(dependencies, callback, errorHandler);
}
参数说明
dependencies
,//表示对指定模块进行更新处理。可以是一个字符串或字符串数组。例如:[“./module1.js”]callback
// 用于在模块更新后触发的函数errorHandler
// 错误处理函数(err, {moduleId, dependencyId}) => {}
文件监听自身更新
module.hot.accept(callback, errorHandler);
四、使用案例
假定我们需要对
lib1.js
文件进行更新监听,那么我们有两种实现方式
1.在父级文件中进行指定监听
//parent.js
import lib from "./lib.js";
if(module.hot){
module.hot.accept(
"./lib.js",
()=>{
console.log("更新后如何处理")
},
(err)=>{
console.log("错误处理")
}
)
}
2.本身内部监听
//lib.js
if(module.hot){
module.hot.accept(
//"./lib.js",
()=>{
console.log("更新后如何处理")
},
(err)=>{
console.log("错误处理")
}
)
}
3.不做任何处理
//lib.js
if(module.hot){
module.hot.accept()
}
4.只做错误处理
//lib.js
if(module.hot){
module.hot.accept(
(err,{moduleId,dependencyId})=>{}
)
}