在不使用“yarn eject” 弹出 create react app webpack配置情况下 自定义配置。
create-react-app 2.x版本
需要借助插件重写 react脚手架配置
1.安装依赖(配置less)
yarn add less less-loader customize-cra react-app-rewired -D
复制代码
- customize-cra 帮助你自定义react脚手架2.x版本配置
- react-app-rewired 帮助你重写react脚手架配置
2.项目根目录下创建 config-overrides.js配置文件
项目启动时会自动运行 config-overrides.js配置
/* config-overrides.js */
const { override, addLessLoader } = require('customize-cra')
module.exports = override(
addLessLoader()
)
复制代码
3.修改package.json的scripts字段
将react-scripts替换成react-app-rewired
修改前:
/* package.json */
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
复制代码
修改后:
/* package.json */
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
复制代码
4.重新 yarn start ,引入less文件会自动被识别加载
import './index.less'
yarn start
复制代码
其他配置
const {
override,
addLessLoader, // less配置函数
fixBabelImports, // 按需加载配置函数
addBabelPlugins // babel插件配置函数
} = require('customize-cra')
module.exports = override(
addLessLoader(),
...addBabelPlugins( // 支持装饰器
[
'@babel/plugin-proposal-decorators',
{ legacy: true}
]
),
fixBabelImports('import', { // antd 按需加载
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css'
})
)
复制代码