场景
在create-react-app
脚手架创建的React项目中难免会需要修改到Webpack的配置,例如:
- 项目中需要配置代理服务器
- 项目中需要针对
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自定义配置时比较麻烦
使用CRACO1来重写
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;
},
};