create-react-app 脚手架封装了Webpack的配置 但是还有些方法需要添加 所以需要二次配置

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

二次配置一般有两种方法
1. eject
2. customize-cra

推荐你使用第二种，因为第一种是不可逆的，比如你在飞机上，你跳下去还回得来吗（滑稽）

下面介绍第二种的用法
这种方法是现在比较推荐的。
首先需要在当前目录安装 customize-cra和react-app-rewired

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

安装完成后在项目根目录下创建一个新的文件：config-overrides.js

touch config-overrides.js

配置如下

const { override }  = require("customize-cra")
module.exports = override({
	//引入插件写相关配置
})

举个栗子！ 如果想使用别名 ，可以结构出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-app-rewired start",
   
    "build": "react-app-rewired build",

    "test": "react-app-rewired test",
 
  }

大功告成！