时间戳

首页 > 解决方案 > 使用 CRA2 和 redux 时如何启用 HMR？

reactjs - 使用 CRA2 和 redux 时如何启用 HMR？

问题描述

我正在开发一个使用 create-react-app v2 创建的 React 应用程序。最近开始使用 CSS-in-JS 库，即 styled-components。之前，我不太关心每次更改时是否重新加载整个应用程序或是否有热模块更换。但是对于 CSS-in-JSS，当我更改 css 时重新加载整个应用程序时，这非常烦人。

我发现尽管hotCRA2 启用了 webpack config 的选项，但没有热重载。

我应该说我从来没有在 webpack 中自己配置过 HMR，所以我对如何使用它没有扎实的了解。

我寻求一个决定，但对我来说这一切都相当模糊。我想出了以下问题：

  1. react-hot-loader和通常的 HMR有什么区别？我可以在没有 react-hot loader 的情况下进行热模块更换（至少对于 css）吗？

  2. 我可以在不弹出的情况下以某种方式启用 HMR 吗？我见过 CRA1 的解决方案，但我使用的是 CRA2。我也使用 craco 来调整默认的 CRA2 webpack 配置，所以我很高兴能找到一个稍微改变 webpack 配置的解决方案。

  3. 为什么 CRA2 默认不启用 HMR？实际上，我一直认为它已启用，并且由于某些原因需要整个重新加载 - 我不太关心它，一切对我来说都很好。

标签： reactjsreduxcreate-react-appwebpack-hmrreact-hot-loader

解决方案

react-hot-loader 和通常的 HMR 有什么区别？我可以在没有 react-hot loader 的情况下进行热模块更换（至少对于 css）吗？

模块热替换 (HMR) 是 Webpack 提供的核心功能。Webpack 的编译器提供了一个 module.hot.accept() API。您的应用程序代码可以注册回调以在重新编译某些文件时运行。

react-hot-loader是一个单独的库，它使用 webpack 的 HMR 来保存组件的状态。如果您只使用 HMR，每次保存时它都会重新加载或重新渲染您的应用程序，因此您的应用程序的所有状态都将丢失。为避免这种情况，您需要 RHL 或react-hot-loader.

CRA2 已经默认启用了 HMR，我创建了一个并弹出它以查看 webpack 的配置。如果您不需要保留应用程序状态，那么您可以直接使用 HMR 而无需安装 RHL。

参考 ：

  1. Webpack HMR 与 React-Hot-Loader
  2. Webpack 配置

推荐阅读