当我们以watch方式启动webpack 时，每次保存修改的文件后，webpack会重新编译，浏览器重新刷新加载资源，这意味着页面上我们已经操作的流程会被刷新，开发起来及其不方便。更好的方式是浏览器不刷新就将重新编译的代码加载进来重新渲染。

HMR（Hot Module Replacement）就是解决这个问题的。

HMR是怎么工作的？

当整个应用还在运行的时候，HMR允许我们修改、增加、删除js模块，不用刷新浏览器。
在Webpack Development Server内部创建HMR server ，它会和浏览器中的HMR runtime通过websocket通信。

1_UGYFDKGrQF6ID3CofCHUwg.png
流程如下：
1、第一次启动应用时，webpack会生成manifest文件，该文件包含了构建的hash，以及所有模块的清单，并且将HMR runtime内置到构建生成的内容中
2、保存修改的文件后，会被webpack检测到
3、webpack将会重新编译一次整个应用，创建一个新的manifest文件并和旧的最对比，这个过程也称作热更新
4、热更新将会被发送到HMR server ，HMR server 将更新发送给HMR runtime
5、HMR runtime使用合适的loader处理变更

如果HMR server向HMR runtime发送update失败了，HMR server会通知webpack-dev-server，webpack-dev-server会重新刷新整个浏览器，该行为可以通过hotOnly: true禁用

怎么开启HMR

  1. // webpack.config.js
  2. module.exports = {
  3.   entry: {
  4.      app: './src/index.js',
  5.   },
  6.   devtool: 'inline-source-map',
  7.   devServer: {
  8.     hot: true,
  9.     // ... other config omitted
  10.   },
  11.   plugins: [
  12.     // Enable the plugin
  13.     new webpack.HotModuleReplacementPlugin(),
  14.   ],
  15. }
  1. // index.js
  2. import component from "./component";
  3. document.body.appendChild(component);
  4. // Check if HMR interface is enabled
  5. if (module.hot) {
  6.   // Accept hot update
  7.   module.hot.accept();
  8. }