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

}),
  ]

  // 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',
  }
  addWebpackPlugin(
    new GeneratePackageJsonPlugin(
      packageMeta,
      path.resolve(__dirname, 'package.json')

themeVariables: ["@primary-color"],
  indexFileName: "index.html",
  generateOnce: false // generate color.less on each compilation
};

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css"
  }),
  addLessLoader({
    modifyVars: {},
    javascriptEnabled: true
  }),
  addWebpackPlugin(new AntDesignThemePlugin(options))
);

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(),
);

'@primary-color': '#ffa81e', // 全局主色
      '@link-color': '#1890ff', // 链接色
      '@success-color': '#52c41a', // 成功色
      '@warning-color': '#faad14', // 警告色
      '@error-color': '#f5222d', // 错误色
      '@font-size-base': '14px', // 主字号
      '@heading-color': 'rgba(0, 0, 0, .85)', // 标题色
      '@text-color': 'rgba(0, 0, 0, .65)', // 主文本色
      '@text-color-secondary': 'rgba(0, 0, 0, .45)', // 次文本色
      '@disabled-color': 'rgba(0, 0, 0, .25)', // 失效色
      '@border-radius-base': '4px', // 组件/浮层圆角
      '@border-color-base': '#d9d9d9', // 边框色
      '@box-shadow-base': '0 2px 8px rgba(0, 0, 0, .15)', // 浮层阴影
    },
  }),
  addWebpackPlugin(
    new webpack.DefinePlugin({
      'process.env.SENTRY_DSN': JSON.stringify(process.env.SENTRY_DSN),
      'process.env.SENTRY_RELEASE': JSON.stringify(process.env.SENTRY_RELEASE),
    })
  ),
  setWebpackExternalsPlugin,
  setWebpackTargetPlugin,
  setPublicPathPlugin
)

module.exports = {
  webpack: webpackMaker,
  jest: function(config) {
    config.runner = '@jest-runner/electron'
    config.testEnvironment = '@jest-runner/electron/environment'
    config.coveragePathIgnorePatterns = [

// 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',
  }
  addWebpackPlugin(
    new GeneratePackageJsonPlugin(
      packageMeta,
      path.resolve(__dirname, 'package.json')
    )
  )(config)

  return config
}

const {addWebpackPlugin, override} = require('customize-cra');
const rewireReactHotLoader = require('react-app-rewire-hot-loader');
const execa = require('execa');
const replacePlugin = require('webpack-plugin-replace');

// Technique for injecting git version info from here: https://stackoverflow.com/a/48824432
const gitHash = execa.sync('git', ['rev-parse', '--short', 'HEAD']).stdout;
const gitNumCommits = Number(execa.sync('git', ['rev-list', 'HEAD', '--count']).stdout);
const gitDirty = execa.sync('git', ['status', '-s', '-uall']).stdout.length > 0;

module.exports = override(
    rewireReactHotLoader,
    addWebpackPlugin(new replacePlugin({
        include: ['appVersion.ts'],
        values: {
            '__BUILD_DATE__': Date.now(),
            '__NUM_COMMITS__': gitNumCommits,
            '__GIT_HASH__': gitHash,
            '__GIT_DIRTY__': gitDirty
        }
    }))
);

'@gray-6': '#bfbfbf',
      '@gray-7': '#8c8c8c',
      '@gray-8': '#595959',
      '@gray-9': '#262626',
      '@gray-10': '#000',
    },
    modules: {
      localIdentName: '[local]--[hash:base64:5]',
    },
  }),
  addAlias(),
  addDecoratorsLegacy(),
  enableEslintIgnore(),
  addYaml,
  addWebpackBundleSize(),
  addWebpackPlugin(new WebpackBar()),
  addWebpackPlugin(
    new webpack.NormalModuleReplacementPlugin(
      /antd\/es\/style\/index\.less/,
      path.resolve(__dirname, 'lib/antd.less')
    )
  ),
  disableMinimizeByEnv(),
  addExtraEntries(),
  buildAsLibrary(),
  supportDynamicPublicPathPrefix()
)

//@ts-check
'use strict';

const { addWebpackPlugin, override, useBabelRc, addWebpackAlias } = require('customize-cra');
const MonacoEditorWebpackPlugin = require('monaco-editor-webpack-plugin');
const WorkerPlugin = require('worker-plugin');

module.exports = override(
  addWebpackPlugin(new MonacoEditorWebpackPlugin()),
  addWebpackPlugin(new WorkerPlugin()),
  useBabelRc(),
  addWebpackAlias({
    '@velcro/bundler': '@velcro/bundler/dist/dist-module/index.js',
    '@velcro/resolver-host-compound': '@velcro/resolver-host-compound/dist/dist-module/index.js',
    '@velcro/resolver-host-unpkg': '@velcro/resolver-host-unpkg/dist/dist-module/index.js',
    '@velcro/resolver': '@velcro/resolver/dist/dist-module/index.js',
  })
);

'@gray-7': '#8c8c8c',
      '@gray-8': '#595959',
      '@gray-9': '#262626',
      '@gray-10': '#000',
    },
    modules: {
      localIdentName: '[local]--[hash:base64:5]',
    },
  }),
  addAlias(),
  addDecoratorsLegacy(),
  enableEslintIgnore(),
  addYaml,
  addWebpackBundleSize(),
  addWebpackPlugin(new WebpackBar()),
  addWebpackPlugin(
    new webpack.NormalModuleReplacementPlugin(
      /antd\/es\/style\/index\.less/,
      path.resolve(__dirname, 'lib/antd.less')
    )
  ),
  disableMinimizeByEnv(),
  addExtraEntries(),
  buildAsLibrary(),
  supportDynamicPublicPathPrefix()
)

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())
);