create-react-app二次配置的两种方法

前言

日常的React项目开发过程中，基本都会去使用create-react-app（简称cra）这个脚手架。cra中封装了不少关于Webpack的配置，但是有时候这并不能满足我们的需求，例如需要配置别名的时候，这个时候就需要对cra进行二次配置了。废话不多说，下面上正餐：

正文

二次配置cra一般来说有两种方法：

1. Eject

eject这种方法首先是不推荐使用的，虽然它存在于cra的命令当中，但是它是不可逆的，除非万不得已才去使用。在react项目中的package.json中有（如下图）eject命令，运行该命令就可以对react项目的配置进行弹射向外部暴露。

运行之后会提示是否真的要执行该操作，输入y确认

之后项目目录中会多出一堆文件夹和文件，这个时候可以在config文件夹中对webpack进行配置。如果要进行类似按需加载的配置，可以在package.json文件的babel中添加plugin并进行配置。

2.customize-cra

这种方法是现在比较推荐的。
首先需要在当前目录安装 customize-cra和react-app-rewired
安装完成后在项目根目录下创建一个新的文件：config-overrides.js
配置如下：

const { override } = require("customize-cra")

module.exports=override({
    //引入插件写相关配置
})

如果要配置别名，需要从customize-cra中解构出addWebpackAlias这个插件

在这里插入代码片
addWebpackAlias({
        assets:path.resolve(__dirname,"./src/assets")
        ...
    })

ant-design的按需加载对于cra来说比较常用，配置如下：

fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
    })

还有一个比较常用的就是配置静态资源目录

setWebpackPublicPath('/目录名')

配置完config-overrides.js之后需要对项目的package.json进行修改

"scripts": {
	//"start": "react-script start"
    "start": "react-app-rewired start",
    //"start": "react-script build"
    "build": "react-app-rewired build",
    //"start": "react-script test"
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

配置完之后重新运行项目，进行的修改就生效了。