参考链接

在 create-react-app 中使用 ant-sign
如何扩展 Create React App 的 Webpack 配置
基于create-react-app的再配置
react run eject报错 修改git配置

扩展 Create React App 的 Webpack 配置

因为 create-react-app 脚手架默认的配置不支持 stylus，所以要对其配置进行扩展。

扩展方法主要有两种：

• 项目 eject
• 使用 react-app-rewired

项目 eject

执行 yarn eject 可以把 webpack 的默认配置暴露出来，

执行 yarn eject 的时候有可能会报错：

原因是 git 没有提交修改，执行
git add .
git commit -m ""
再重新 yarn eject 可以正常运行

eject 后项目根目录下会出现 config 文件夹，里面就包含了 webpack 配置config

├── env.js
├── jest
│   ├── cssTransform.js
│   └── fileTransform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js // 开发环境配置
├── webpack.config.prod.js // 生产环境配置
└── webpackDevServer.config.js

我们可以根据需要任意配置，这个过程不可逆。

使用 react-app-rewired

在 CRA 创建的项目中安装了react-app-rewired后，可以通过创建一个config-overrides.js文件来对 webpack 配置进行扩展。

/* config-overrides.js */
module.exports = function override(config, env) {  
  //do stuff with the webpack config...  
  return config;
}

override方法的第一个参数config就是 webpack 的配置，在这个方法里面，我们可以对 config 进行扩展，比如安装其他 loader 或者 plugins，最后再将这个 config 对象返回回去。最后再修改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", 
+ "test": "react-app-rewired test", 
}