craco.config.js是什么？最近在学习 react ，看到别人在用 craco.config.js , 就想

最近在学习 react ，看到别人在用 craco.config.js , 就想了解下

当我们使用 create-react-app 构建的项目，会把 webpack 相关的配置都隐藏起来，如果想要修改配置的话，可以执行以下命令可以把隐藏的配置文件放出来，但注意，此操作一旦执行是不可逆的。

npm  run  eject

需要注意的是，如果执行了 eject后，将不再享受使用 create-react-app 创建项目时提供的自动化功能，同时也需要自己处理 webpack 的配置和构建相关的问题。这就意味着你需要对项目的配置和构建非常熟悉，如果不熟悉的话，我个人不建议将这个配置暴露出来，但想满足更灵活的定制需求的话，就得需要暴露出来，进行个性化配置。

那么接下来咱看看 craco.config.js 能带来什么

craco.config.js 是一个用于自定义 create-react-app 创建项目配置的文件，允许开发者在不执行 eject 的命令的情况下，覆盖和扩展 webpack 的默认配置，从而满足更复杂的项目需求。

`craco.config.js` 的功能

1. 自定义`webpack`配置

可以修改webpack 的模块解析规则、添加或替换 Loader，以及配置webpack插件
比如：设置路径别名（@指向src目录）或优化输出配置

2. 修改 `Babel` 配置

支持自定义Babel的预设和插件，以支持新语法或优化代码

3. 集成 `Eslint` 和 `Styleint`

自定义Eslint 和 Styleint 的配置规则，以统一代码的风格

4. `PostCSS` 配置

自定义PostCSS插件和配置，优化样式处理流程

5. 环境特定配置

支持根据开发环境（开发、生产、测试）动态调整配置

6. 插件系统

支持通过插件扩展功能，集成 Less、 Sass或其他工具

使用方法

1. 安装 craco

npm i @craco/craco@alpha -D

2. 创建 `craco.config.js`文件：

在项目根目录下创建 craco.config.js, 根据自己的需求进行 webpack的配置等

3. 修改 `package.json`

将 react-scripts 替换成 craco

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test
  }

配置实例：

const path = require("path");

const resolve = (dir) => path.resolve(__dirname, dir);

module.exports = {
  webpack: {
    alias: {
      "@": resolve("src"),
    },
  },
};

优势

无需 eject , 保留CRA 的便利性和后续升级能力
高度可定制：支持 webpack、Babel、eslint 等的自定义
插件生态：通过插件扩展功能，满足多样化需求

craco.config.js是什么？

craco.config.js 的功能

1. 自定义webpack配置

2. 修改 Babel 配置

3. 集成 Eslint 和 Styleint

4. PostCSS 配置