React-hot-loader 更新时组件状态丢失

Question

我在使用 React-hot-loader 的过程中遇到一个问题，每次更新 React 组件的内部状态都会丢失。

具体的情况是这样的，在将其他配置工作做好以后，我按照使用教程在 .babelrc 文件中添加了这样一行代码：

"plugins": ["react-hot-loader/babel"],

完成上面工作以后运行 webpack-dev-server --hot --progress --env dev 命令。

这时我发现，当我修改了页面代码以后，xxx.hot-update.js 文件被添加到了 head 标签中，但是页面并没有发生任何变化，改动的地方没有被刷新，当然，React 组件的内部状态也没有发生任何变化。

然后我将上面 .babelrc 文件中的那行代码去掉，也就是不使用 React-hot-loader 提供的 Babel 插件。

然后运行 webpack-dev-server --hot --progress --env dev 命令。

此时，当我修改了页面代码以后，xxx.hot-update.js 文件同样被添加到了 head 标签中，页面改动的地方确实发生了变化，但是与此同时 React 组件的内部状态也丢失了！

我反复查看以后发现，此时的代码更新似乎是将 reactroot 这个元素整个替换掉了，而不是仅仅将有变化的组件单独更新！

上面两种情况的区别就是是否添加 "plugins": ["react-hot-loader/babel"], 这一行代码。

按照官方文档来说，这一行代码是一定要添加到 .babelrc 文件中的，但是我添加以后就出现了上面所说的第一种情况，迫不得已，我目前只能删掉这句代码，暂且让 React-hot-loader 将我的 reactroot 元素每次整体替换掉。

有没有同学有过类似的情况，烦请赐教，不胜感谢！

这里是项目的 webpack 配置信息：webpack.config.js