How to use the customize-cra.addBabelPlugin function in customize-cra

config.target = 'node'
  config.externals = [
    nodeExternals({
      whitelist: [/^antd\/es\/[^\/]+\/style/],
    }),
  ]

  // Remove all kind of chunks
  config.optimization.runtimeChunk = false
  config.optimization.splitChunks = false

  // No need to minize when building a library
  disableMinimize()(config)

  // Remove async imports to avoid generating chunks as well
  addBabelPlugin('dynamic-import-node')(config)

  // Extract styles to the desired place
  removeWebpackPlugin(['MiniCssExtractPlugin'])(config)
  addWebpackPlugin(
    new MiniCssExtractPlugin({
      filename: 'lib/style.css',
      ignoreOrder: true,
    })
  )(config)

  // Write a package.json for the generated library
  const packageMeta = {
    name: '@pingcap-incubator/tidb-dashboard',
    version: packageVersion,
    main: 'main.js',
  }

const path = require('path');
const {
  addBabelPlugin,
  addWebpackPlugin,
  babelExclude,
  babelInclude,
  disableEsLint,
  override,
} = require('customize-cra');
// TODO: Replace with official plugin when it is supported
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = override(
  // Add support for React Fast Refresh
  process.env.NODE_ENV === 'development'
    ? addBabelPlugin('react-refresh/babel')
    : undefined,
  process.env.NODE_ENV === 'development'
    ? addWebpackPlugin(new ReactRefreshPlugin())
    : undefined,
  // Add support for transpiling local package imports
  babelInclude([
    path.resolve('src'),
    path.resolve('../backend'),
    path.resolve('../universal'),
  ]),
  babelExclude([
    path.resolve('../backend/node_modules'),
    path.resolve('../universal/node_modules'),
  ]),
  // Disable CRA lint in favour of project lint
  disableEsLint(),

process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
  /*
  // auto-imports for antd; currently we're opting for more manual control in src/lib/antd.js
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      // '@primary-color': '#d23d67'
    }
  }),
  */
  addBabelPlugin([
    '@babel/plugin-proposal-class-properties',
    {
      loose: true
    }
  ]),
  addWebpackAlias({
    '@ant-design/icons/lib/dist$': path.join(__dirname, 'src/lib/icons.js')
  }),
  addWebpackPlugin(new CompressionPlugin()),
  /*
  addWebpackPlugin(new AntDesignThemePlugin({
    stylesDir: path.join(__dirname, './src/styles'),
    varFile: path.join(__dirname, './src/styles/vars.less'),
    mainLessFile: path.join(__dirname, './src/less/main.less'),
    themeVariables: [
      '@primary-color',

const {
  override,
  fixBabelImports,
  addLessLoader,
  addBabelPlugin,
  addWebpackAlias,
} = require('customize-cra');

// const bgColor = '#f2f6ff';
// const defaultColor = '#3E80FB';
// const hoverColor = '#145ce2';

const option = [
  // 添加热更新
  addBabelPlugin('react-hot-loader/babel'),
  addWebpackAlias({
    'react-dom': '@hot-loader/react-dom',
  }),
  // 按需加载
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  // 自定义主题加载less
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      // '@primary-color': defaultColor,
      '@border-radius-base': '2px',
      // '@link-hover-color': hoverColor,

module.exports = (config, env) => {
  config = override(disableEsLint(),
    addBabelPlugin('styled-components'),
    addBabelPlugin([
      'inline-react-svg',
      {
        ignorePattern: 'desert'
      }
    ]))(config, env);
  config = rewireReactHotLoader(config, env);
  return config;
};

module.exports = (config, env) => {
  config = override(disableEsLint(),
    addBabelPlugin('styled-components'),
    addBabelPlugin([
      'inline-react-svg',
      {
        ignorePattern: 'desert'
      }
    ]))(config, env);
  config = rewireReactHotLoader(config, env);
  return config;
};

function rewireInlineImportGraphqlAst(config, env, gqlPluginOptions = {}) {
  const pluginOptions = Object.assign({}, gqlPluginOptions, { nodePath: process.env.NODE_PATH })
  return addBabelPlugin(['import-graphql', pluginOptions])(config)
}

const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const { addBabelPlugin, addWebpackPlugin, override } = require('customize-cra');

module.exports = override(
  addBabelPlugin(require.resolve('react-refresh/babel')),
  addWebpackPlugin(new ReactRefreshPlugin())
);