HMR 即模块热替换（hot module replacement）的简称，它可以在应用运行的时候，不需要刷新页面，就可以直接替换、增删模块。

webpack 可以通过配置 webpack.HotModuleReplacementPlugin 插件来开启全局的 HMR 能力，

  plugins: [new webpack.DefinePlugin({'process.env': require('../config/dev.env')}),// 开启全局的 HMR 能力new webpack.HotModuleReplacementPlugin(),]

开启后 bundle 文件会变大一些，因为它加入了一个小型的 HMR 运行时（runtime），当你的应用在运行的时候，webpack 监听到文件变更并重新打包模块时，HMR 会判断这些模块是否接受 update，若允许，则发信号通知应用进行热替换。

这里提及的“判断模块是否接受 update”是指判断模块里是否执行了 module.hot.accept()， 这里举个小例子：

如图，白色的部分是编译后的模块依赖树，这时候我们修改了 B 模块，导致 B 模块以及依赖它的 A 模块都出现了变化（绿色部分）。

模块变更的时候，webpack 会顺着依赖树一层一层往上冒泡，查询哪个模块是接受 update 的，查询到了则终止冒泡，并通知 SERVER 更新其爬过的模块。

假设我们把 module.hot.accept() 放在 B 模块执行，则 webpack 会查找到 B模块的变更就停止继续往上冒泡查找了（A是不允许变更的模块）—— 如果 B 的内容变更，是直接在 B 模块调用的，那页面就能直接展示出新的内容出来，这样效率也高（绕过了A模块）；但如果 B 的内容，实际上是要经过 A 来调用，才能在页面上展示出来，那此时页面就不会刷新（即使 B 的内容变了）。

说白了就是 module.hot.accept() 放的好，就可以绕过一些不必要的模块变更检查来提升效率，不过对于懒人来说，直接置于最顶层的模块（比如入口模块）最为省心。

参考文档 https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack