HMR【模块热更新】

HMR HotModuleReplacement 模块热更新，实现的功能：在页面不刷新的前提下，实时替换要更新的模块！！！它集成在了 webpack-dev-server中！！

(1) 解决的问题：

• 自动刷新导致的页面状态丢失的问题。

     - 有的模块是需要我们保存原来的页面状态的。
     - eg：编辑器模块，如果每次对该模块的更新，页面都会刷新的话，那么之前编辑的内容就会丢失，这不是我们想要的
  

(2) 使用方法：

在webpack.config.js中的配置

• 在 devServer 中开启

• 配置插件 ，该插件是 webpack 内置的！！

注意：

• 对 css 类型的资源，不需要手动处理既可以有效

     - 因为 css 是经过 loader 处理的
     - 而在 style-loader中已经帮我们手动处理了
  

• 对于 js 资源需要我们针对不同模块进行不同的手动处理

      - 因为不同 js 模块的导出结果不一样 ，业务逻辑也不一样，就需要不同的处理办法
  

处理方法：

需要借助 mudule.hot.accept() 注册方法

• 该方法接收两个参数

       - 需要处理的模块的路径
       - 处理回调函数
  

栗子： 对于编辑器 js 模块的处理

(3) 注意事项：

解决办法： 使用 hotOnly 而非 hot

• hotOnly 模式下 ，如果 HMR处理代码出错，不会自动进行页面刷新 ，hot 会！！

解决办法： 将注册方法，用 if 判断逻辑包裹，先判断启动了 HMR 之后才会执行 HMR API

代码中的 HMR 处理代码，会在打包的时候自动删除，不会造成影响！！！

(4) 框架中的 HMR：

往往框架中的 HMR 就不需要我们手动去处理了，因为框架下的开发，每种文件都是有规律的，eg：create-react-app脚手架下的开发，每个模块默认导出一个类 or 函数！！方便集中处理，且脚手架已经内置处理好了！！这也是为什么大多数人喜欢使用集成的框架进行开发！！！简单，方便。