react官方脚手架项目配置使用carco配置

配置方法其中个人了解有2中方法:

1.使用官方提供的eject暴露项目所有的配置(改操作是不可逆的,而且在暴露之前需要工作区是干净的,个人不推荐这种操作)
2.使用antd官方推荐的carco来配置项目

下面会说一些最基本的配置less,按需加载,以及打包进度

先要下载对应的依赖项 @carco/carco carco-less babel-plugin-import(按需加载) simple-progress-webpack-plugin(配置打包进度)

1.修改启动命令(package.json)
"scripts": {
    "start":  " set PORT=7766 && craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
  
2.在app.less中加入
@import '~antd/dist/antd.less'; (注意不要引入css, 因为下方修改的主题颜色是less文件配置的)

3. 在根目录下创建carco.config.js
const CracoLessPlugin = require('craco-less')
const webpack = require('webpack')
const path = require('path')
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
module.exports = {
	webpack: {
		alias: {
			'@': path.join(__dirname, 'src'),
		},
		plugins: [new SimpleProgressWebpackPlugin()],
	},
	//按需引入
	babel: {
		plugins: [
			[
				'import',
				{
					libraryName: 'antd',
					libraryDirectory: 'es',
					//可以设置为true即是less,注意！！！！此时不需要加引号
					//也可以设置为css,css需要加引号
					style: true,
				},
			],
		],
	},
	//自定义主题
	plugins: [
		{
			plugin: CracoLessPlugin,
			options: {
				// 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
				lessLoaderOptions: {
					lessOptions: {
						//颜色即为自定义颜色
						modifyVars: { '@primary-color': '#1DA57A' },
						javascriptEnabled: true,
					},
				},
			},
		},
	],
}