H5：craco的使用

作用： a. 对项目中 wepback 进行自定义配置；b. 配置别名，方法引用的导入。

• 1、安装craco 和 craco-less

yarn add @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import

• 2、修改package.json文件
  原本启动时，我们是通过react-scripts来管理的; 现在启动时，我们通过craco来管理;

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

• 3、在根目录下创建 craco.config.js 文件用于修改默认配置：

const CracoLessPlugin = require('craco-less');
const path = require("path");
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },//配置antd主题色
            javascriptEnabled: true,
          },
        },
      },
    }
  ],
  webpack: {
    // 配置别名,可以直接从根目录下面开始查找文件
    alias: {
      "@": resolve("src"),
      "components": resolve("src/components")
    }
  }
}