How to modify create-react-app's configuration without using eject

yarn add react-app-rewired customize-cra -D

"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
}

module.exports = {}

yarn add antd -D

cosnt { override, fixBabelImports } = require('customize-cra');
module.exports = override(
	fixBabelImports
  	"import",
    {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"
    }
  )

yarn add sass -D

yarn add less [email protected] -D

const { override, addLessLoader } = require('customize-cra');
module.exports = override(
addLessLoader({
// You can add other less configurations here lessOptions: {
   	//Configure according to your needs~
    }
})
);

const { override, addWebpackAlias ​​} = require('customize-cra');
const path = require('path');
module.exports = override(
  // alias
addWebpackAlias({
    // When loading a module, you can use the "@" symbol for abbreviation~
    '@': path.resolve(__dirname, './src/')
  }),
  // externals
  addWebpackExternals({
    // Note the corresponding remote file address of jQuery introduced in public/index.html "jQuery": "jQuery"
  })

yarnadduglifyjs-webpack-plugin-D

const { override, addWebpackPlugin } = require('customize-cra');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = override(
	// Note that the plugin is started in the production environment
	process.env.NODE_ENV === 'production' && addWebpackPlugin(
  	new UglifyJsPlugin({
  		// Enable package cache cache: true,
  		// Enable multi-threaded packaging parallel: true,
  		uglifyOptions: {
  			// Delete warnings warnings: false,
  			//Compression compress: {
  				// Remove the console
  				drop_console: true,
  				// Remove the debugger
  				drop_debugger: true
  			}
  		}
  	})
  )

yarn add webpack-bundle-analyzer cross-env -D

// package.json file "scripts": { "build:analyzer": "cross-env ANALYZER=true react-app-rewired build" }

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
cosnt { override, fixBabelImports, addWebpackPlugin, addLessLoader, addWebpackAlias, addWebpackExternals } = require('customize-cra');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
module.exports = override(
	fixBabelImports
  	"import",
    {
			"libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"
    }
  ),
  addLessLoader({
		// You can add other less configurations here lessOptions: {
   		//Configure according to your needs~
    }
	}),
  // alias
	addWebpackAlias({
    // When loading a module, you can use the "@" symbol for abbreviation~
    '@': path.resolve(__dirname, './src/')
  }),
  // externals
  addWebpackExternals({
    // Note the corresponding remote file address of jQuery introduced in public/index.html "jQuery": "jQuery"
  }),
  // Note that the plugin is started in the production environment
	process.env.NODE_ENV === 'production' && addWebpackPlugin(
  	new UglifyJsPlugin({
  		// Enable package cache cache: true,
  		// Enable multi-threaded packaging parallel: true,
  		uglifyOptions: {
  			// Delete warnings warnings: false,
  			//Compression compress: {
  				// Remove the console
  				drop_console: true,
  				// Remove the debugger
  				drop_debugger: true
  			}
  		}
  	})
  ),
  // Determine the value of the ANALYZER parameter of the environment variable process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),
  addWebpackPlugin(new ProgressBarPlugin())
)