Detailed use and introduction of React craco (similar to Vue’s external vue.config.js)

1. Introduction

• craco official documentation , craco Github .

• cracoIt is a Create React App（CRA）tool for expansion and CRAa Reactscaffolding tool for quickly building applications. CRAProvides a simple project structure and configuration, allowing developers to quickly start Reactthe development of a project.

  However CRA, the configuration is hidden and developers cannot customize and extend it. That's cracowhy . craco（Create React App Configuration Override）Allows developers to override and extend CRAthe configuration to meet more complex project needs.

  By using craco, developers can modify , , , etc. without popping up CRAthe configuration of . Provides a simple way to override the default configuration of , while retaining the simplicity and ease of use of .webpack 配置babel 配置ESLint 配置devServer配置cracoCRACRA

  Through this craco, developers can use custom webpack 插件, , babel 插件and 其他工具to meet the specific needs of the project. For example: you can add a custom one webpack loader, configure a custom babel presetone plugin, or modify webpackthe output path, etc.

2. Use

• Install

$ npm i -D @craco/craco

• The configuration file created in the root directory craco.config.jscan be understood as Vuethrown in and out of the project vue.config.js.

      my-app  
      ├── node_modules  
    + ├── craco.config.js  
      └── package.json
  

  Other writing methods for configuration file names are supported. If multiple configuration files are found, cracothe highest one in the above list will be used:

  1、craco.config.ts
  2、craco.config.js
  3、craco.config.cjs
  4、.cracorc.ts
  5、.cracorc.js
  6、.cracorc
  

• If there are multiple configuration files, you can also package.jsonspecify the configuration file by adding fields:

  ...
  {
        
          
      "cracoConfig": "config/craco-config-with-custom-name.js"  
  }
  ...
  

  Or scriptsspecify the configuration file in the instruction to compile:

  {
        
          
      "scripts": {
        
          
          "start": "craco start --config config/craco-config-with-custom-name.js"  
      }  
  }
  

• Modify the configuration package.jsonin the file and replace it with , for example:scriptsreact-scriptscraco

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

• In craco.config.jsthe file, the configuration of can be modified and extended as needed CRA. Here is the basic structure of an example configuration file:

  It can basically cover all required configurations for normal business. For more configurations, you can view the official documentation :

  const path = require('path')
  const lessPlugin = require('craco-less')
  
  module.exports = {
        
        
    // 插件配置
    plugins: [
      {
        
        
        plugin: lessPlugin,
        options: {
        
        
          lessLoaderOptions: {
        
        
            lessOptions: {
        
        
              // modifyVars: { '@primary-color': '#1DA57A' },
              javascriptEnabled: true
            }
          }
        }
      }
      // ...
    ],
    // 修改 babel 配置
    babel: {
        
        
      // plugins: [
      //   ['@babel/plugin-proposal-decorators', { legacy: true }],
      //   [   
      //     'import', 
      //     {
        
        
      //       'libraryName': 'antd',
      //       'libraryDirectory': 'es',
      //       'style': 'css' // 设置为 true 即是 less 这里用的是 css
      //     }
      //   ]
      // ]
      // ...
    },
    // 修改 eslint 配置
    eslint: {
        
        
      // ...
    },
    // 修改 module 配置
    module: {
        
        
      // rules:[// 规则，在写 style.module.scss 的时候发现引入后缀为 .scss 会报错，在这里配置一下即可
      //   {
        
        
      //     test: /.scss$/,
      //     loaders: ['style-loader', 'css-loader', 'sass-loader']
      //   }
      // ]
      // ...
    },
    // 跨域配置
    devServer: {
        
        
      proxy: {
        
        
        '/api': {
        
        
          target: 'https://xxx:8080',
          changeOrigin: true,
          pathRewrite: {
        
        
            '^/api': ''
          }
        }
      }
      // ...
    },
    // webpack 配置
    webpack: {
        
        
      // 配置别名
      alias: {
        
        
        // 约定：使用 @ 表示 src 文件所在路径
        '@': path.resolve(__dirname, 'src')
      },
      // webpack 插件
      plugins: {
        
        
        add: [ /* ... */],
        remove: [ /* ... */],
      },
      // plugins: [
      //   new ConfigWebpackPlugin(),
      //   ...whenDev(() => [new CircularDependencyPlugin()], []),
      // ],
      // 这里面是 webpack 原始配置，这里追加的配置，将与原始配置合并
      configure: {
        
        
        resolve: {
        
        
          fallback: {
        
        
            'path': false,
            'util': false,
            'url': false,
            'http': false,
            'https': false,
            'stream': false,
            'assert': false,
            'querystring': false,
            'zlib': false
          }
        }
      }
      // ...
    }
  }