React 之 config-overrides文件配置

通过react脚手架[create-react-app]创建的项目，如果需要在项目中配置一些webpack配置，需要在根目录下新建一个名称为config-overrides.js的文件。

一、配置步骤：
1、引入react-app-rewired插件
react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置
2、安装customize-cra

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

3、修改 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, addWebpackAlias} = require('customize-cra');
const path = require('path')

 module.exports = override(
   addWebpackAlias({
     assets: path.resolve(__dirname, './src/assets'),
     components: path.resolve(__dirname, './src/components'),
     pages: path.resolve(__dirname, './src/pages'),
     common: path.resolve(__dirname, './src/common')
   })
);

2、在开发过程中，我们经常会用到Ant Design Mobile这个组件库，在引入组件的同时，往往还需要引入组件的css样式，如果每次都单独引入就比较麻烦，我们可以在config-overrides文件下全局配置一下。如下：

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

 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd-mobile',
     style: 'css',
   }),
);