12.webpack 模块热替换HMR

HMR(hot module replacement) 一个模块发生变化时，只会重新打包这一个模块(而不是打包所有模块)极大的提升构建速度。
HMR功能基于devServer。

• 样式文件：可以使用HMR功能：因为style-loder内部已经实现
• js文件：默认不能使用HMR功能，在js入口文件添加支持HMR功能的代码后，修改非入口文件时可以实现热更新。
• html文件：默认不能使用HMR功能，同时会导致html文件不能热更新(在单页面开发中不需要做HMR功能)
  • 解决方法：修改entry入口，将html文件引入
• 文件结构
  

1. 在webpack配置文件webpack.config.js中配置divServer，并开启HMR，其他配置根据自己需求配置。

   module.exports = {
         
         
   	...
   	devServer: {
         
         
           contentBase: path.join(__dirname, "build"),
           compress: true,
           port: 9000,
           hot: true, //开启热更新
       }
   }
   

2. 此时css/less等样式文件就可以热更新

3. webpack.config.js文件中的入口将html文件路径放入，即可实现html文件的热更新，如果是只有一个html文件，则没用。

   module.exports = {
         
         
   	entry: ['./src/index.js', './src/index.html'],
   	...
   }
   

4. 入口文件index.js

   import add from './js/base.js';
   import subtraction from './js/common.js';
   
   if(module.hot){
         
         
       //一旦module.hot为true,说明开启了HMR功能
       module.hot.accept('./js/base.js', function (){
         
         
           //当base.js文件发生变化，只有base.js文件会打包，其他模块不会重新打包
           //打包完毕后调用该回调函数
           console.log('base.js文件被打包');
       })
   
       module.hot.accept('./js/common.js', function(){
         
         
           console.log('common.js文件被打包');
       })
   }
   add(5,5);
   subtraction(5,5)
   

5. 此时就开启了js文件的热更新。当修改src/js/base.js文件时不会重新打包common.js文件

6. 启动devServer

   npx webpack-dev-server