create-react-app创建的项目如何修改webpack配置

场景

在create-react-app脚手架创建的React项目中难免会需要修改到Webpack的配置，例如：

1. 项目中需要配置代理服务器
2. 项目中需要针对eslint做配置、提供sass的编译支持

create-react-app并不会支持直接提供相关配置，一般有以下两种方式

方案

直接修改create-react-app的配置(不推荐)

在项目根目录运行

npm run eject

运行上述脚本之后，就会弹出一个二次确认该操作的提示：Are you sure you want to eject? This action is permanent. …
直接选择：yes
项目就会创建一个config文件夹和script文件夹，config文件夹里面就有webpack.config.js和webpackDevServer.config.js文件提供webpack的配置可进行修改

缺点：运行eject命令的操作是不可逆的，它会暴露create-react-app中的模板项目的预定义配置，整个配置过于冗长，导致项目中需要对webpack自定义配置时比较麻烦

使用CRACO¹来重写

CRACO介绍

craco 是 “Create React App Configuration Override” 的缩写，它是一个用于扩展和覆盖 Create React App（CRA）默认配置的工具。Create React App 是 Facebook 提供的一个流行的脚手架工具，用于快速初始化和构建React Web应用程序，特点是开箱即用并且有一套固定的配置集。

然而，CRA 的默认配置对于某些复杂项目的需求可能不够灵活，为了在不执行 eject（解除捆绑）操作——也就是不直接暴露和修改底层的 webpack 配置的情况下——对项目配置进行自定义，craco 应运而生。通过使用 craco，开发者可以在保持 CRA 项目结构的同时，方便地添加、修改或替换 CRA 的配置项，例如添加对 LESS 或 Sass 的支持、调整 Webpack 插件配置等高级功能。这样既能保留 CRA 的便捷性，又能获得更多的配置自由度。

CRACO使用

安装CRACO

npm i -D @craco/craco

在项目的根目录中创建 craco 配置文件

  my-app
  ├── node_modules
+ ├── craco.config.js
  └── package.json

修改react命令

"scripts": {
-  "start": "react-scripts start"
+  "start": "craco start"
-  "build": "react-scripts build"
+  "build": "craco build"
-  "test": "react-scripts test"
+  "test": "craco test"
}

配置craco.config.js例子

module.exports = {
	//webpack个性化配置
	webpack: {
		alias: { /* ... */ },
		plugins: {
			add: [ /* ... */],
			remove: [ /* ... */],
		},
		configure: (webpackConfig, { env, paths }) => {
			/* ... */
			webpackConfig.optimization = {
				splitChunks: {
					chunks: 'async',
					minSize: 20000,
					minRemainingSize: 0,
					minChunks: 1,
					maxAsyncRequests: 30,
					maxInitialRequests: 30,
					enforceSizeThreshold: 50000,
					cacheGroups: {
						defaultVendors: {
							test: /[\\/]node_modules[\\/]/,
							priority: -10,
							reuseExistingChunk: true,
						},
						default: {
							minChunks: 2,
							priority: -20,
							reuseExistingChunk: true,
						},
					},
				}
			}
			return webpackConfig;
		},
	},
	//配置开发服务器
	devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
		/* ... */
		devServerConfig.port = 8080
		return devServerConfig;
	},
};

---

1. CRACO官网 ↩︎