HMR热替换
HMR的配置只适用于开发环境，因为生产环境没有devServer
目录结构：
之前使用的开发环境，如果修改了其中一个文件的代码，保存之后所有的文件都会进行一次重新编译，比如我们修改了css代码，但是js文件没有进行修改，但是保存之后，js文件也会重新进行编译
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>
<div></div>
<!-- 我是h1 -->
<h1>12345789</h1>
</body>
</html>
index.css
div{
width: 200px;
height: 200px;
border:1px solid #000;
margin: 10px;
background: blue;
}
index.js
import './index.css';
import {a} from "../src/js/a.js"
console.log(a);
a.js
export const a = parseInt(Math.random() * 10)
此时浏览器的效果
我们修改index.css文件的div的背景颜色为red
会发现，不仅仅背景颜色发生了改变，并且a.js的随机数也发生了变化，这是因为一个文件发生了变化，所有的文件都重新编译了
热替换：也就是修改哪个文件，替换掉哪个文件，其他的文件不更新
css文件的热更新
需要配置devServer的hot属为true即可
需要注意的是，css文件必须要使用style-loader，因为style-loader内部实现了相关的HMR的功能。我们之前的提取css文件mini-css-extract-plugin的loader是不能实现的
此时我们将index.css文件的颜色变为粉色
js文件的随机数也没有发生变化
js文件的热替换
js文件默认是没有热替换的，此时我们再新建一个b.js文件，和a.js文件是同目录
b.js文件
export const b = parseInt(Math.random() * 10)
index.js文件
import './index.css';import {a} from "../src/js/a.js" import {a} from "../src/js/b.js"
console.log(a,'a'); console.log(b,'b');
随意修改任意一个js文件，所有的文件都会进行重新编译
在入口文件中配置热更新的相关代码
if (module.hot) {
// 一旦module.hot为true了，表示开启了HMR的功能
module.hot.accept("./b.js", function () {
// accept方法会监听b.js文件，一旦这个文件发生了变化，此时其他的模块不会再次进行打包编译
console.log(b, 'b');
})
}
此时修改b.js文件
html文件默认也是没有热替换功能的，并且html文件其实也不需要热替换功能，引入html文件大多数都是入口文件，我们的入口文件一旦进行了修改，势必所有的代码必须进行重新编译，因人index.html文件需要引入css、js等等文件，此时这个文件属于一个入口，一般不需要配置热替换