一、为啥不发起执行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来完成设置的扩展~
这里划重点，记着要考呦~
我们分别几个步调，来一一实现：
下载安装依赖
yarn add react-app-rewired customize-cra -D
一般此刻利用的版本是react-app-rewired@^2.1.8、customize-cra@^1.0.0
设置package.json的呼吁
"scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - "build": "react-scripts build", + "build": "react-app-rewired build", }
在根目次下设置config-overrides.js文件
module.exports = {}
完成了基本设置后，我们在config-overrides.js中举办具体设置，办理我们上面的需求问题。
1.antd的按需加载安装依赖:
yarn add antd -D
设置
cosnt { override, fixBabelImports } = require('customize-cra'); module.exports = override( fixBabelImports( "import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" } )
2.设置css预处理惩罚器-less为啥在这里只强调了less呢，因为create-react-app中内置了sass/scss的预处理惩罚器，只需要利用时安装相关的依赖就可以了（运行时，按照提示缺失的包举办安装即可）。
yarn add sass -D
接下来我们来less的是如何支持的
安装依赖：
yarn add less less-loader@7.3.0 -D
留意这里less-loader的版本less-loader@7.3.0，假如是最新的版本和上面的react-app-rewired和customize-cra版本共同设置时有问题，所以利用了低版本的。
less-loader的最新版本其实是为了共同webpack@5.0利用的。
设置
const { override, addLessLoader } = require('customize-cra'); module.exports = override( addLessLoader({ // 这里可以添加less的其他设置 lessOptions: { // 按照本身需要设置即可~ } }) );
3.配置alias、externals；const { override, addWebpackAlias } = require('customize-cra'); const path = require('path'); module.exports = override( // alias addWebpackAlias({ // 加载模块的时候，可以利用“@”标记来举办简写啦~ '@': path.resolve(__dirname, './src/') }), // externals addWebpackExternals({ // 留意对应的在public/index.html引入jquery的长途文件地点 "jQuery": "jQuery" })
4.出产情况打包-去除console.log、debugger；安装依赖
yarnadduglifyjs-webpack-plugin-D
设置
const { override, addWebpackPlugin } = require('customize-cra'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = override( // 留意是production情况启动该plugin process.env.NODE_ENV === 'production' && addWebpackPlugin( new UglifyJsPlugin({ // 开启打包缓存 cache: true, // 开启多线程打包 parallel: true, uglifyOptions: { // 删除告诫 warnings: false, // 压缩 compress: { // 移除console drop_console: true, // 移除debugger drop_debugger: true } } }) )
5.打包功效优化阐明；安装依赖
yarnaddwebpack-bundle-analyzercross-env-D
cross-env用于设置情况变量
设置
// package.json文件 "scripts": { "build:analyzer": "cross-env ANALYZER=true react-app-rewired build" }
// 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.打包增加进度条提示；安装依赖
yarnaddprogress-bar-webpack-plugin-D
const { override, addWebpackPlugin } = require('customize-cra'); const ProgressBarPlugin = require('progress-bar-webpack-plugin'); module.exports = override( addWebpackPlugin(new ProgressBarPlugin()) )
以上就是我们实现几个需求的设置。我们来看看完整的config-overrides.js文件。