(理解)webpack的热模块替换HMR

我们刚刚自动更新的方式是当我们修改了一个地方，会整个浏览器都更新了一遍，但这其实是没有必要的，会浪费性能而且保存的数据也会丢失，我们只需要更新我们修改的地方

认识模块热替换（HMR）

• 什么是HMR呢？

  • HMR的全称是Hot Module Replacement，翻译为模块热替换
  • 模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面

• HMR通过如下几种方式，来提高开发的速度：

  • 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失
  • 只更新需要变化的内容，节省开发的时间
  • 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式

• 如何使用HMR呢？

  • 默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可（默认已经开启）

开启HMR

• 修改webpack.config.js的配置：

module.exports = {
  //其他配置忽略
  devServer:{
    hot:true
  }
}

• 浏览器可以看到如下效果：

• 但是你会发现，当我们修改了某一个模块的代码时，依然是刷新的整个页面：
  • 这是因为我们需要去指定哪些模块发生更新时，进行HMR

if(module.hot){//判断有没有hot
  //指定哪一个模块需要HMR
  module.hot.accept("./util/math.js",()=>{//触发热更新
    console.log("math更新了")
  })
}
//此时还是会大部分刷新，那是因为你如果在math文件中引入其他文件(其中包括了入口文件，那差不多相当于全刷新了)，webpack也会认为引入相关联的文件也要刷新，那这种情况怎么解决？
//在util文件夹下创建一个demo.js文件，里面就啥都不写，然后将demo引入math文件中。然后我们将上面内容修改一下，改成热更新demo部分，这样demo带动math文件的更新

if(module.hot){//判断有没有hot
  //指定哪一个模块需要HMR
  module.hot.accept("./util/demo.js",()=>{
    console.log("demo更新了")
  })
}