在 React 官网中描述了 create-react-app（以下称 CRA） 已经有一套完善的默认 webpack 配置，但如果在项目中需要自定义手动配置 CRA 默认的 webpack 配置有两种方案。

方案一：执行命令 npm run eject

在 Create React App 中提到了一条命令 npm run eject，但是讲明了这条命令是不可逆转的，并且还存在一些其他的缺点。

例如：CRA 是可以通过升级其中的 react-scripts 包来升级 CRA 的特性，比如用老版本 CRA 创建了一个项目，这个项目不具备 PWA 功能，但只要项目升级了 react-scripts 包的版本就可以具备 PWA 的功能，项目本身的代码不需要做任何修改。但如果我们使用了 eject 命令，就再也享受不到 CRA 升级带来的好处了，因为 react-scripts 已经是以文件的形式存在于你的项目，而不是以包的形式，所以无法对其升级。

还有就是如果我们只需要修改极少的 webpack 配置也是没有必要使用 npm run eject 方法的。

因此，我个人是不推崇的这种方案的。

方案二：使用 react-app-rewired 和 customize-cra 来自定义 create-react-app 的 webpack 配置。

使用 customize-cra 的好处就是可以不用执行 npm run eject 而进行修改 webpack 配置。我第一次看到 customize-cra 是在Ant Design 中，下面就着重讲解一下如何使用。

步骤一、 安装依赖

npm i  customize-cra react-app-rewired --dev

步骤二、修改根目录下 package.json 文件

2-1

步骤三、在项目根目录下添加 config-overrides.js 文件。在该文件中配置 webpack。

3-1

注意：步骤三中的只是一个用法示例，至于 override 中的其他API， 请参与 API doc，若要查看我的其他 用法示例请参阅文章：在 create-react-app 中引入 Tailwind CSS。

参考网址：

https://www.jianshu.com/p/930dc37e8e08?utm_campaign=shakespeare

https://ant.design/docs/react/use-with-create-react-app-cn

https://blog.csdn.net/qq_37648307/article/details/106456616?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-2.control