HMR热模替换
场景一：更新css代码
index.js
const printTest = () => {
console.log('index.js加载完毕！');
}
printTest();
index.css
#box2 {
width: 400px;
height: 200px;
background-color: #abcdef;
}
入口 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <img src="./images/spon.jpeg" alt=""> -->
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
此时
当我们更改css的#box2中的width，将200px变成400px后，保存代码，浏览器自动刷新后如下：
我们可以看到浏览器在自动刷新后，我们的index.js也重新加载了，但是我们并没有更新index.js，我们想要的效果是在我们第一次加载整个页面以后，清空控制台，然后我们修改css代码，保存修改后的代码浏览器重新加载，控制台上不会打印出“index.js加载完毕！”（因为index.js没有变化不需要重新加载）而只需要将我改变的css效果加载出来即可。
场景二 更新一个js文件
我们在上面的代码基础上，增加一个test.js文件
console.log(test.js加载啦！);
function test() {
console.log('test函数test函数')；
}
export function test;
在index.js中引入并调用：
index.js
import test from './test.js'
const printTest = () => {
console.log('index.js加载完毕！');
}
printTest();
test();
此时控制台的情况如下：
如果我们修改test.js中的test方法
console.log(test.js加载啦！);
function test() {
console.log('test函数改变啦！')；
}
export function test;
浏览器自动刷新结果如下：
我们之修改了print.js中的函数，但是连带着index.js中的函数也一并被加载重新打包了。
如果我们项目中，有很多个功能，很多个js文件，当我们调试某一个js文件时，是不是也意味着我只修改了一个点，但是整个项目都要重新打包一遍再加载呢？这样可以想象在开发中调试代码会变得速度很慢
场景一应对方法
这时候我们就可以引入热模替换的概念
我们可以先来试一下：
修改webpack.config.js在devServer中增加hot：true的配置
module.export = {
...
devServer: {
contentBase: join(__dirname, "dist"),
open: true,
port: 3001,
hot: true,
},
};
然后重启现在的工程, 再回到场景一，清空控制台后，重新修改css代码保存，浏览器的加载状态如下：
被提示： App hot update
此时在修改css代码以后已经达到了我们场景一想要的效果了，只是重新加载css，而js文件没有被重新加载。
场景二应对方法
我们在场景一应对方法的基础上，修改一下test.js试试效果，可以看见这个时候还是整体刷新界面，并没有我们想要的只单独加载我们改变的test.js文件：
此时我们需要更改一下入口文件中的index.js, 在修改了test.js的时候可以告诉 webpack 接受更新的模块
import test from './test.js'
const printTest = () => {
console.log('index.js加载完毕！');
}
if(module.hot) {
// webpack.config.js的配置中hot为true的时候，去监听test.js
module.hot.accept('./js/test.js', function () {
test();
})
}
printTest();
test();
此时我们再更改一下test.js试试效果，可以看到界面没有在全部刷新，而是只更新了我们修改的test.js文件
总结
样式文件：可以通过hot: true去启用HRM功能，style-loader内部实现了HMR功能
js文件：默认不使用HMR功能, 如果想实现HRM功能，需要添加支持HRM功能的代码如上述场景二。
html: 默认不使用HMR功能，如果开启HMR功能，需要修改webpack.config.js的入口配置实现html变化后的热更新(参考问题记录【二】)，这里要区分热更新和热模替换两个概念
实践问题记录
当前webpack版本为5.49.0,
【一】当更新index.css中的样式代码并保存后，浏览器没有自动刷新界面展示最新样式。
解决方法：在webpack.config.js中增加target配置
module.export = {
...
target: 'web',
...
};
原因：webpack构建时，会寻找默认的指定环境“browserslist”。我在package.json中配置了browserslsit如下：
{
...
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
}
development的环境配置导致当前的不会自动刷新。webpack在没有配置browserslist时target默认为‘web’,所以解决也可以将browserslist去掉
【二】启用HMR功能后，修改入口index.html文件，不会自动刷新浏览器
原因：html默认不会启用HRM，启用HMR后会导致index.html文件不在热更新（修改index.html文件后，自动刷新浏览器）
需要更改webpack.config.js文件的入口配置
module.export = {
...
entry: ['./src/index.js', './src/index.html'], // 入口文件
...
};
网友评论