webpack 性能优化（7）热更新

热更新 HMR（Hot Module Replacement）

热更新指对数据变化的部分进行局部跟新，而不进行页面刷新

配置

1. devServer 中设置 hot 属性 true

2. 使用 webpack.HotModuleReplacementPlugin() 热更新插件

   Javascript

   let webpack = require('webpack')
   module.exports = {
     devServer: {
       hot: ture, // 开启热更新
       contentBase: './dist'
     },
     plugins: [
       new webpack.HotModuleReplacementPlugin() // 热更新插件
     ]
   }

3. 修改源文件

   Javascript

   // index.js 引用 source.js
   // index.js
   import str from './resource.js'
   console.log(str);
   
   if(module.hot){ // 是否热更新
     module.hot.accept('./resource.js', () => { //如果热更新了，在热更新完成后调用回调
       console.log('文件更新了');
       let str = require('./resource.js'); // 不能使用import，因为import只能写在页面顶端
       console.log(str.default);
     })
   }

   如果只单纯的更新文件，上面可以简写为

   Javascript

   import str from './source'
   console.log(str)
   
   if(module.hot){
     module.hot.accept()
   }