create-react-app自定义配置

幽映每白日，清辉照衣裳。这篇文章主要讲述create-react-app自定义配置相关的知识，希望能为你提供帮助。
这里主要讲解添加less 和实现Antd按需加载
首选需要执行npm run eject 暴露所有内建的配置，这是后面所有配置的基础，这个必须优先执行！
一、实现Antd按需加载
按需加载插件。只需要引入模块即可，无需单独引入样式。

import {Button} from ‘antd‘; ReactDom.render( < div> < Button> XXXX < /Button> < /div> );

1. 使用babel-plugin-import实现Antd按需加载，修改package.json，或者在项目根目录新建文件.babelrc写配置，注意是二选一。
首先执行以下命令安装 babel-plugin-import

npm install babel-plugin-import --save-dev

1）、修改package.json

"babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ] }

【create-react-app自定义配置】2）、修改.babelrc

{ "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ] }

注意：不要认为package.json里已有presets配置这里就不用写，这里的.babelrc会覆盖package.json里带有的babel配置，如果删除presets配置，会报错。
二、引入Less
1）安装less-loader 和 less

npm install less-loader less --save-dev

2）修改config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改)
查找：exclude
原本的 exclude: [/.js$/, /.html$/, /.json$/],
修改为 exclude: [/.html$/, /.(js|jsx)$/, /.(css|less)$/, /.json$/, /.bmp$/, /.gif$/, /.jpe?g$/, /.png$/],
查找：test: /.css$/
原本的 test: /.css$/,
修改为 test: /.(css|less)$/,
在这个test的下面找到use，添加loader

use: [ {...}, {...}, { loader: require.resolve(‘less-loader‘) // compiles Less to CSS } ]

参考地址：
https://blog.csdn.net/zhaoyu_m69/article/details/78800887
https://segmentfault.com/a/1190000012881473
https://blog.csdn.net/qq_35809834/article/details/72670220