如何让react-app-rewired 2支持热加载

这篇文章介绍了如何让react-app-rewired 2支持热加载的两种方式。方式一是使用react-app-rewire-hot-loader插件，需要安装相关依赖并修改config-overrides.js文件和根组件的代码。方式二是使用react-hot-loader插件，需要安装依赖并配置babel和根组件的代码。文章还提到了React Fast Refresh取代React-Hot-Loader的趋势。

如何让react-app-rewired 2支持热加载

公司的前端脚手架基于react-app-rewired，但是实际用下来之后发现不仅技术老旧还有很多不便之处，例如不支持热加载。于是查询了一下如何支持，在这里记录一下。

我这里的版本是：react-app-rewired 2.1.6

方式一：react-app-rewire-hot-loader（无弹出）

具体步骤如下：

安装react-app-rewire-hot-loader

修改config-overrides.js

如果你的写法是：

那么应该创建一个函数：

然后在config-overrides.js中添加：

将根组件标记为热更新

由于版本在4.5.4之前，因此需要对跟组件做以下处理：

这个插件的作用是：

在开发环境中添加 react-hot-loader 插件，并对 eslint-loader 进行配置，使其在开发环境中发出警告。这样可以实现热模块替换和代码热更新的功能。

好处是省去了手动配置 babel 的过程

方式二：react-app-rewire-hot-loader

安装react-hot-loader

配置babel

将根组件标记为热更新

如果是4.5.4 之后

如果是 4.5.4 之前

要不要在生产环境下标记为热更新 GitHub - gaearon/react-hot-loader: Tweak React components in real time. (Deprecated: use Fast Refresh instead.)

后续

也就是说只要是稍微新一点的框架已经支持热更新了，不需要手动去配置了。

我会遇到这个问题，还是因为内部的脚手架太老了。