在 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 文件
步骤三、在项目根目录下添加 config-overrides.js 文件。在该文件中配置 webpack。
注意:步骤三中的只是一个用法示例,至于 override 中的其他API, 请参与 API doc,若要查看我的其他 用法示例请参阅文章:在 create-react-app 中引入 Tailwind CSS。
参考网址:
//www.greatytc.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