使用customize-cra，react-app-rewired扩展create-react-app

先安装相关依赖

经过 npm i customize-cra react-app-rewired -D 或者 yarn add customize-cra react-app-rewired --devjavascript

在 packages.json 同级目录下建立 config-overrides.js 文件，以后就能够在该文件中扩展相关配置了java

customize-cra 提供的插件react

经常使用配置

使cra支持装饰器来使用 `Mobx`：

yarn add @babel/plugin-proposal-decorators --devwebpack

并在 package.json 同级目录添加 .babelrc ：git

{
  "presets": ["react-app"],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
}

而后在 config-overrides.js 添加：github

const { override, addDecoratorsLegacy, useBabelRc } = require('customize-cra');

module.exports = override(
  addDecoratorsLegacy(),
  useBabelRc()
)

就能够在项目里使用装饰器了web

添加 `webpack alias`

修改 config-overrides.js：npm

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');
module.exports = {
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    'components': path.resolve(__dirname, 'src/components');
  })
}

修改AntD主题色，并添加 `Less` 支持，关闭sourcemap：

首先 yarn add less less-loaderjson

修改 config-overrides.js:api

const { override, fixBabelImports, addLessLoader } = require("customize-cra");

process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports("import", {
    libraryName: 'antd',
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  })
);

添加webpack插件：

这里以添加build时的进度条插件举例：

首先 yarn add progress-bar-webpack-plugin chalk --dev

以后修改 config-overrides.js

const { override, ..., addWebpackPlugin } = require('customize-cra');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const chalk = require('chalk');
module.exports = override(
  // 其余配置 ...,
  addWebpackPlugin(new ProgressBarPlugin({
      complete: "█",
      format: `${chalk.green('Building')} [ ${chalk.green(':bar')} ] ':msg:' ${chalk.bold('(:percent)')}`,
      clear: true
    })
  )
)

就能够在 yarn build 时候看到进度条了