当前位置：首页 > article >正文

craco.config.js是什么？

article 2025/3/11 13:07:01

最近学习react，看到别人有在用craco.config.js，于是了解一下，这是一篇小白篇！！

在使用create-react-app 构建项目时，会把webpack相关配置都隐藏起来，若需要修改配置可以执行以下命令将配置文件弹出来，但此操作是不可逆的

npm run eject

需要注意的是，执行 eject 后，你将不再享受 Create React App 提供的抽象和自动化功能，同时也需要自行处理配置和构建的相关问题。这意味着你对项目的配置和构建有更多的责任和掌控，但也能满足更灵活的定制需求。

craco.config.js 是一个用于自定义 Create React App（CRA）项目配置的文件，通过 CRACO（Create React App Configuration Override） 工具实现。CRACO 允许开发者在不执行 eject 命令的情况下，覆盖和扩展 CRA 的默认配置，从而满足更复杂的项目需求。

`craco.config.js` 的功能

自定义 Webpack 配置：
- 可以修改 Webpack 的模块解析规则、添加或替换 Loader，以及配置 Webpack 插件。
- 例如，设置路径别名（如 @ 指向 src 目录）或优化输出配置。
修改 Babel 配置：
- 支持自定义 Babel 的预设和插件，以支持新语法或优化代码。
集成 ESLint 和 Stylelint：
- 自定义 ESLint 和 Stylelint 的配置规则，以统一代码风格。
PostCSS 配置：
- 自定义 PostCSS 插件和配置，优化样式处理流程。
环境特定配置：
- 支持根据开发环境（开发、生产、测试）动态调整配置。
插件系统：
- 支持通过插件扩展功能，例如集成 Less、Sass 或其他工具。

使用方法

安装 CRACO：
```
npm i @craco/craco -D
```
创建 craco.config.js 文件：
在项目根目录下创建 craco.config.js，并根据需要配置 Webpack、Babel 等。

修改 package.json：
将 react-scripts 替换为 craco，例如：

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

配置示例：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    configure: (webpackConfig) => {
      webpackConfig.resolve.extensions.push('.scss');
      return webpackConfig;
    },
  },
  devServer: {
    port: 3001,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
};