react app rewrited alternative craco usage example

1. Reasons for not using custom-cra

custom-cra,react-app-rewiredandcracoAll are used to rewrite CRA configuration without eject

Custom-cra last updated two years ago, some configurations could not keep up with the new version. For example, using webpack5 configuration less errors, although there is currently a solution to introduce new packages.customize-cra-less-loader, but with the widespread use of webpack5, more and more problems have been exposed, so it is very necessary to find alternatives in future versions.

2. Basic use of craco

Installation dependenciesyarn add @craco/craco

Modify the command in , change react-app-rewired to craco

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

Create configuration files in the root directory

/*  */
 = {
  webpack: {},
  babel: {},
}

craco More configurations

3. Use craco to modify the antd topic

Installation dependenciesyarn add craco-less

/*  */
const CracoLessPlugin = require('craco-less');
 = {
  webpack: {},
  babel: {},
  //Configure the plugin provided by craco  plugins: [
        {   // Modify the antd theme            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        math: 'always',
                        modifyVars: {
                            '@primary-color': '#1890ff', //Theme color                        }, 
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
}

4. Alias

Configure aliases in

/*  */
const path = require('path');
 = {
  webpack: {
    alias: {
      '@': (__dirname, '../src'),
      '@moduleIcon': (__dirname, '../src/assets/images/moduleIcon'),
      '@pages': (__dirname, '../src/pages'),
    },
  },
  babel: {},
  plugins: [],
};

5. Babel extension

Lodash package on demand

New

const addBabelPlugins = () =&gt; {
  const configs = [
    ['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }, 'lodash'],
  ];
  return configs;
};
 = addBabelPlugins;

Configure babel extensions in

/*  */
const addBabelPlugins = require('./');
 = {
  webpack: {
    alias: {},
  },
  babel: {
    plugins: addBabelPlugins(),
  },
  plugins: [],
};

Introduce extensions by environment

Revise

const addBabelPlugins = () => {
  const configs = [
    ['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }, 'lodash'],
  ];
  if (.NODE_ENV !== 'development') {
    (['babel-plugin-transform-remove-console', { exclude: ['error', 'warn'] }]);
  }
  return configs;
};
 = addBabelPlugins;

The reason why we use functions to introduce extensions is mainly to facilitate the judgment of the environment in the function, and we can also use the craco-owned ones.whenDevSimilar functions to make environment judgments, such as:

const { whenDev } = require("@craco/craco");
 = {
    webpack: {
        //Configure webpack plugin        plugins: [
            new ConfigWebpackPlugin(),
            ...whenDev(() =&gt; [new CircularDependencyPlugin()], [])
        ]
    }
};

6. Subcontract

New

const addSplitChunks = () => {
  if (.NODE_ENV !== 'development') {
    return {
      chunks: 'all',
      minSize: 30000,
      name: false,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      cacheGroups: {
        '': {
          name: '',
          priority: 40,
          test: /[\\/]node_modules[\\/](echarts|zrender)[\\/]/,
          chunks: 'all',
        },
        'async-common': {
          chunks: 'async',
          minChunks: 2,
          name: 'async-commons',
          priority: 30,
        },
        commons: {
          name: 'commons',
          chunks: 'all',
          minChunks: 2,
          priority: 20,
        },
      },
    };
  }
  return {};
};
 = addSplitChunks;

Revise

const addSplitChunks = require('./');
 = {
  webpack: {
    configure: (webpackConfig, { env }) => {
       = addSplitChunks();
      return webpackConfig;
    },
  },
};

Any webpack configuration can be configured in

7. Configure the proxy

/*  */
 = {
  devServer: {
    port: 9000,
    proxy: {
      "/juhe": {
        target: "",
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          "^/juhe": "",
        },
      },
    },
  },
};

secure: By default, backend services running on HTTPS with invalid certificates will not be accepted. Set secure to false if necessary

changeOrigin: By default, the source of the host header is retained when proxying. ChangeOrigin can be set to true to override this behavior.

8. Last

If you are not sure about the configuration of webpack5, please refer to another article of mineDetailed tutorial on webpack5 (version 5.68.0)

The above is the detailed content of the use example of the react app rewrited alternative craco. For more information about craco rewrited rewrited, please follow my other related articles!