create-react-app 创建的项目默认使用的是 react-scripts(存在于node_modules文件夹中)来处理开发服务器和构建,它内置了一些webpack相关配置。一般不会暴露出来给开发者,但是在有些情况下我们需要修改下webpack默认配置,如修改outputPath、sourcemap方案等,但由于 eject
是不可逆的,所以craco插件应运而生,为我们提供了更好的解决方案。
craco(Create React App Configuration Override)用来自定义由 create-react-app 创建的项目内部配置,比如修改 webpack 配置,覆盖react-scripts的默认设置。
安装:
npm install @craco/craco react-app-rewire-alias(建议安装在dependencies中)
配置:
在项目根目录下创建 craco.config.js 文件,并且在package.json文件中修改一些配置如下:
// 将如下模块代码
"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},
// 换成
"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject"},
craco.config.js 文件配置:
const path = require("path");
const { CracoAliasPlugin } = require("react-app-rewire-alias");module.exports = {// webpack 配置webpack: {// 配置内容},// 配置别名plugins: [// 配置内容],
};
以上配置完成后重启项目