React框架的antd craco.config.js配置

1.需要下面的命令

yarn add antd
yarn add @craco/craco

2.安装craco后需要package.json的命令

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },

3.在根目录下创建一个craco.config.js的文件，和package.json同级

//这里是craco.config.js的内容
const path = require('path');
module.exports = {
  webpack: {//webpack配置
    // 配置别名
    alias: {//设置别名是为了让后续引用的地方减少路径的复杂度
      "@": path.resolve("src"),
      "@utils": path.resolve("src/utils"),
    }
  },
  babel: {//支持装饰器
    plugins: [
      ["@babel/plugin-proposal-decorators", { legacy: true }],
      [   
        "import", 
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
           "style": 'css' //设置为true即是less 这里用的是css
         }
     ]
  ]
  },
  module:{
    rules:[//规则，在写style.module.scss的时候发现引入后缀为.scss会报错，在这里配置一下即可
      {
        test: /.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ]

  },
  //配置代理解决跨域
  devServer: {
    proxy: {
      "/api": {
        target: 'http://XXXXXXXX:8888',
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};