webpack 热加载 使用module.hot.accept和不使用的区别

---

前言

在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})=>{}
	)
}