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

先安裝相關依賴

通過 npm i customize-cra react-app-rewired -D 或者 yarn add customize-cra react-app-rewired --dev

在 packages.json 同級目錄下創建 config-overrides.js 文件，之后就可以在該文件中擴展相關配置了

customize-cra 提供的插件

配置package.json

將script里面的start，build腳本改為

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    ...
}

常用配置

• 使cra支持裝飾器來使用 Mobx：

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

  並在 package.json 同級目錄添加 .babelrc ：

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

  然后在 config-overrides.js 添加：

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

  就可以在項目里使用裝飾器了

• 添加 webpack alias

  修改 config-overrides.js：

  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-loader

  修改 config-overrides.js:

  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')} ] ${chalk.bold(':percent')}`,
        clear: true
      })
    )
  )
  

  就可以在 yarn build 時候看到進度條了