Webpack 热替换

在应用过程中实时替换某个模块，应用状态不会因此受到影响，在自动刷新的情况下，如果更新了某一个模块，会导致页面状态丢失，如果使用热替换的话，会只将修改的模块实时的替换至应用中，不用完全刷新应用。极大程度的提高了工作效率。

开启HMR

HMR集成在webpack-dev-server中，如果使用这个特性，需要在运行webpack-dev-server命令的时候，后面加上—hot（webpack-dev-server —hot）。也可以在配置文件中添加配置开启。
注意：Webpack中的HMR需要手动处理模块热替换逻辑。样式文件在loder的使用已经自动处理过了，脚本文件需要自己进行替换逻辑的处理。我们需要手动处理js模块更新后的热替换。

const webpack = require("webpack");
module.exports = {
    ...
  devServer: {
        hot: true,
    },
  plugins: [
      new webpack.HotModuleReplacementPlugin(),
  ]
}

HMR API

可以使用HMR提供的API，控制脚本文件的热更新。

accept

接受给定依赖模块的更新，并触发一个回调函数，来对这些更新做出响应。
语法：

module.hot.accept(
  dependencies, // 可以是一个字符串或字符串数组，注册的脚本文件路径，当这个路径下的脚本文件发生变化的时候，进行热更新处理
  callback // 用于在模块更新后触发的函数
)