Webpack：HMR

HMR(hot module replacement热模块替换)

一个模块发生变化，只会重新打包这一个模块，极大提升构建速度。

1. 启用HRM

   更新 webpack-dev-server 配置， 然后使用 webpack 内置的 HMR 插件。

   devServer: {
     // 开启HMR功能
     // 修改webpack中的配置，要重新npx webpack serve
     hot: true
   },
   

   运行：npx webpack serve

2. 给相关文件进行配置

   1. 样式文件：使用style-loader，其内部实现HMR

      {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
      },
      

   2. html文件：默认不能使用HMR功能，同时会导致html不能热更新的问题（不用HMR功能，只有一个html文件）

      解决：修改entry配置，将html文件引入，写成数组字符串的形式

      entry: ['./src/js/index.js', './src/index.html']
      

   3. js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码

      注意：只能处理非入口js文件的其他文件

      //index.js 入口文件
      import '../css/text.css'
      import printMe from './test'
      
      console.log('index.js文件被加载');
      
      if (module.hot) {
        // module.hot为true，说明开启了HMR功能 --> 监听test.js文件，一旦发生变化，其他模块不会重新打包构建
        module.hot.accept('./test.js', function () {
          printMe();
        })
      }
      
      
      //test.js 非入口文件
      console.log('test.js被加载！');
      
      export default function printMe() {
        console.log('Updating test.js~~~');
      }