create-react-app 之 config-overrides 文件配置

想要修改create-react-app的某些配置，有时候不想使用reject的办法，可以使用config-overrides.js的方式来解决，首先安装react-app-rewired、customize-cra。

一、引入react-app-rewired customize-cra

（1）安装模块

npm install react-app-rewired customize-cra --save-dev

或者使用yarn引入

yarn add react-app-rewired customize-cra -D

（2）使用模块

修改package.json

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

二、应用步骤

（1）配置路径别名

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

重点是addWebpackAlias()，括号里面的内容是主要的，冒号左侧是你要设置的别名，冒号右侧就是别名所代替的路径了，也就是说你在引入的时候，可以用左侧的别名代替右侧的路径。

（2）配置antd的css

安装antd之后想要antd 的样式生效，首先要在最外层的css中引入css，全局的引入，这样会比较麻烦。
可以在这里配置一下，让系统自动引入，方便快捷，还不容易出其他的问题。引入方式如下：

const { 
  override, 
  fixBabelImports,
  addWebpackAlias
} = require('customize-cra');
const path = require('path');
module.exports = override(
  fixBabelImports(
    'imports',
    {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: 'css'
    }
  )
)