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

公沈浪
2023-12-01

想要修改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'
    }
  )
)
 类似资料: