React官方脚手架工具Create-react-app 用于快速创建React应用,但依旧有局限性,我们根据项目需求需要对Create-react-app的配置进行修改。这里针对引入Antd的两种配置方式进行配置。
方案一:react-scripts
1. 安装less、less-loader依赖包
a. yarn安装
yarn add less less-loader
b. npm安装
npm install --save less less-loader
2. 修改配置文件
config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改)
a. 查找 :exclude
原本的 exclude: [/\.js$/, /\.html$/, /\.json$/],
修改为 exclude: [/\.html$/, /\.(js|jsx)$/, /\.(css|less)$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
b. 查找:test: /.css$/
原本的 test: /\.css$/,
修改为 test: /\.(css|less)$/,
c. 在这个test的下面找到use,添加loader
方案二:React-app-rewired
一个对 create-react-app 进行自定义配置的社区解决方案。
1. 安装react-app-rewired
npm install –save-dev react-app-rewired
2. 修改package.json启动项
3. 添加配置文件
在项目根目录创建文件:config-overrides.js,用于修改默认配置。
4. 使用babel-plugin-import
实现Antd按需加载,修改config-overrides.js
npm install --save-dev babel-plugin-import
5. 使用react-app-rewire-less配置Less
npm install –save-dev react-app-rewire-less