关于React的craco配置，可以解决less加载问题，不用npm run eject也能配置webpack，用@表示根目录等功能

！！！注意，只要改了craco.config.js里面的内容，都得重新跑项目才能生效

一、下载

 1.首先安装craco的模块  

npm i @craco/craco -D

2.接着在项目根目录下创建文件,一定是根目录，注意！！！不是src里面,文件名一定要一模一样

  craco.config.js   

module.exports = {

}

 3.修改package.json的script属性 

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

4. ！！！！最后，一定要重新启动项目，才能生效 

npm run start

接下来就可以进行配置了~~~

二、用@代表src目录，引入文件的时候再也不用 ../../../ 了

例如之前需要 ../../components/head/head.js

加了配置之后可以这么设置 @/components/head/head.js

const path = require('path')  
module.exports = {
  webpack: {
    alias: {
      '@': path.join(__dirname, 'src') // 允许通过@符号来表示 src目录
    }
  }
}

三、配置less 使用问题

因为react框架默认是sass的，但是antd是less ，如果想用less我已知的方法，

一个是npm run eject ，但是不推荐，因为这个操作是不可逆的。

一个是用craco-less   ( 下面的配置  ↓↓ )

  1.下载less less-loader

npm i less less-loader -D

  2.下载 craco-less

npm i craco-less

如果下载不成功，可以强制安装
npm i craco-less --force 

3.在craco.config.js 里面配置

const CracoLessPlugin = require("craco-less");
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { "@primary-color": "#181616" },   //这个可以改变antd组件的默认颜色
            javascriptEnabled: true
          }
        }
      }
    }
  ],
}

四、配置webpack

webpack 里面可以随意配置你想要的内容

我配置了两个东西 ，

一个是目录src地址  alias: { }部分

一个是改变打包出来后的文件路径地址，configure: { }部分 例如：

原本webpack打包出来后是直接访问根目录的index.html

加了 publicPath: '/csWeb/'  配置后， 会访问 /csWeb/index.html

webpack: {
    alias: {
      '@': path.join(__dirname, 'src') // 允许通过@符号来表示 src目录
    },
    configure: (webpackConfig, { env, paths }) => {
      // 修改生成的 index.html 文件中的脚本引用地址
      webpackConfig.output = {
        ...webpackConfig.output,
        publicPath: '/csWeb/', // 设置你想要的自定义路径
        // assetModuleFilename: 'quickhelp/[name][ext]'
      };

      return webpackConfig;
    }
  },