1、准备
2、webpack.config.js
3、结果
- 1、当hot未false或未定义时，
- 2、当hot为true
  - 1、修改css样式，只有对应的css发生变化
  - 2、js发生变化，只有对应的js发生变化

HMR: hot module replacement 热模块替换 / 模块热替换
作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
极大提升构建速度
样式文件：可以使用HMR功能：因为style-loader内部实现了~
js文件：默认不能使用HMR功能 —> 需要修改js代码，添加支持HMR功能的代码
注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。
html文件: 界面会重新加载

1、准备

#box {
  width: 200px;
  height: 200px;
  background-image: url('../imgs/angular.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

console.log('print.js被加载了~');
function print() {
  const content = 'hello print';
  console.log(content);
}
export default print;

// 引入
import print from './print';
import '../css/index.less';
console.log('index.js文件被加载了~');
print();
function add(x, y) {
  return x + y;
}
console.log(add(1, 3));
if (module.hot) {
  // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
  module.hot.accept('./print.js', function() {
    // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
    // 会执行后面的回调函数
    print();
  });
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发环境配置</title>
  </head>
  <body>
    <h1>开发环境配置~~~</h1>
    <div id="box"></div>
    <img src="./imgs/vue.jpg" alt="vue">
     <!-- <img src="./imgs/react.png" alt="react"> -->
  </body>
</html>

2、webpack.config.js

...
devServer: {
  // 开启HMR功能
  // 当修改了webpack配置，新配置要想生效，必须重新webpack服务
  hot: true
}

3、结果

1、当hot未false或未定义时，

问题：修改js\html\css时，会重新加载其他的文件？

2、当hot为true

1、修改css样式，只有对应的css发生变化

#box {
  width: 300px;
  height: 200px;
  // background-image: url('../imgs/angular.jpg');
  background-color: aqua;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

2、js发生变化，只有对应的js发生变化

console.log('print.js被加载了~');
function print() {
  const content = 'hel1lo print';
  console.log(content);
}
export default print;