如何不使用eject修改create-react-app的配置
一、为啥不建议执行eject
1.执行eject产生了什么变化？
2.执行eject带来了什么问题？
首先，执行eject是不可逆的，复杂的webpack等配置由框架本身转交给用户自己进行维护了。
其次，在版本迭代时，如果更新了react、react-scripts、eslint、tsconfig等依赖，有可能会引起版本依赖的问题，即使我们按错误信息修复了之后，项目还是无法运行。
所以我们一般不太建议使用yarneject的方式暴露create-react-app框架的配置。
二、有需求咋解决
实际开发中，我们还是需要更新webpack、babel的配置，比如：
- antd的按需加载；
- 配置css预处理器-less；
- 设置alias、externals；
- 生产环境打包-去除console.log、debugger；
- 打包结果优化分析；
- 打包增加进度条提示；
前方高能预警~
yarn add react-app-rewired customize-c来完成配置的扩展~
这里划重点，记住要考呦~
我们划分几个步骤，来一一实现：
下载安装依赖
一般现在使用的版本是react-app-rewired@^2.1.8、customize-cra@^1.0.0
配置package.json的命令
在根目录下配置config-overrides.js文件
完成了基础配置后，我们在config-overrides.js中进行详细配置，解决我们上面的需求问题。
1.antd的按需加载
安装依赖:
配置
2.配置css预处理器-less
为啥在这里只强调了less呢，因为create-react-app中内置了sass/scss的预处理器，只需要使用时安装相关的依赖就可以了（运行时，根据提示缺失的包进行安装即可）。
接下来我们来less的是如何支持的
安装依赖：
注意这里less-loader的版本less-loader@7.3.0，如果是最新的版本和上面的react-app-rewired和customize-cra版本配合配置时有问题，所以使用了低版本的。
less-loader的最新版本其实是为了配合webpack@5.0使用的。
配置
3.设置alias、externals；
4.生产环境打包-去除console.log、debugger；
安装依赖
配置
5.打包结果优化分析；
安装依赖
cross-env用于配置环境变量
配置
// config-overrides.js
const { override, addwebpackplugin } = require('customize-cra');
const { bundleanalyzerplugin } = require('webpack-bundle-analyzer');
module.exports = override(
// 判断环境变量analyzer参数的值
process.env.analyzer && addwebpackplugin(new bundleanalyzerplugin())
)
6.打包增加进度条提示；
安装依赖
以上就是我们实现几个需求的配置。我们来看看完整的config-overrides.js文件。
到此这篇关于如何不使用eject修改create-react-app的配置的文章就介绍到这了,更多相关修改create-react-app的配置内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！