webpack+react的模块热更新不生效问题

Question

问题及背景：

在使用react框架练习模块热更新的过程中，大家有没有遇到了react组件热更新无效的问题？
即修改组件内容后只能看到console中HMR信息，却看不到界面更新。

DellLee老师说，

“主流的loader已经帮我们做了module.hot.accept()的事情，所以webpack的HRM会实时显示。

然而看起来并不是这样。

---

相关配置：

webpack的相关配置：

// module.rules的配置
{
	test: /.js?$/i,
	exclude: /node_modules/,
	use: ["babel-loader"]  	// 相关配置
},
// ...
// plugins的配置
[
    new HtmlWebpackPlugin({
      template: "./src/template/index.html",
      title: "my App",
      filename: "index.html",
      showErrors: true
    }),
    new CleanWebpackPlugin(["dist"]),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin() 	// 相关配置
  ],

babel.config.js的相关配置：

module.exports = function (api) {
  // Cache the returned value forever and don't call this function again.
  api.cache(true);
  const presets = [
    "@babel/react", // 相关配置
    "@babel/preset-env"
  ];
  const plugins = [
    // 略
  ];

  return {
    presets,
    plugins
  };
};

在网上找到一个方法，即在应用的入口处加上这段代码，界面热更新生效了！！

// 应用的入口处，随意地方书写这段代码
ReactDom.render(<App />, document.getElementById("app"));

// 代码从这里开始
if (module.hot) {
  module.hot.accept(() => {
	  // 一行代码都没有...
  });
}
// 代码从这里结束

---

请教老师和同学：

1，为啥最后这段代码什么逻辑也没写，却实现了模块热更新？
2，babel-loader底层未帮我们写module.hot.accept() ？

Answer 1

qq_虚无缥缈_0 2019-02-25 11:42:33

babel和HMR不是一家人，为啥帮你热更新

其实没成功，因为没记录react 组件之前的state，还得使用react-hot-loader

• 提问者 renderman #1

  谢谢回复。我的问题1可能没说清楚，是否只在入口处写热更新代码，还是在所有的模块中写热更新代码？

• qq_虚无缥缈_0 回复 提问者 renderman #2

  入口处。因为入口处引入的其他模块，都被打包进自己肚子里去的。

• Dell 回复 提问者 renderman #3

  if (module.hot) {
    module.hot.accept(() => {
  	  // 一行代码都没有...
    });
  }
  这样可以实现hmr？ 同学你的demo发我一下
  qq： 913937000 ， 我看一下