webpack和create-react-app的关系

Create React App（CRA）背后是使用 Webpack 的，但它是对 Webpack 的一层封装 ------ 也就是说，它在底层使用了 Webpack，但你不需要直接操作 Webpack 配置。

---

🧠 类比理解

你可以把 Create React App 想象成一个"全自动洗衣机"：

• Webpack 就像洗衣机的发动机和控制系统。
• Create React App 就像是你看到的按钮和界面，它帮你控制了所有复杂的设置。

所以，Webpack 确实在背后运行 ，但你不直接接触它，而是通过 CRA 提供的默认配置来使用它。

---

🔍 CRA 和 Webpack 的关系详解

工具	角色	是否需要手动配置
Create React App (CRA)	上层脚手架工具	❌ 不需要，默认隐藏配置
Webpack	底层打包工具	⚠️ 默认隐藏，除非你 eject 或自定义

在 CRA 中：

• 使用 react-scripts 来管理构建流程。
• react-scripts 内部已经集成了：
  • Webpack
  • Babel
  • ESLint
  • TypeScript 支持（如果你用了 --template typescript）
  • Jest（用于测试）

---

📦 查看是否使用了 Webpack？

你可以打开你的 package.json 文件，虽然没有显式列出 webpack 作为依赖项，但它是被 react-scripts 间接引入的。

你也可以运行以下命令查看 Webpack 是否存在于 node_modules 中：

npm ls webpack

如果输出中包含类似：

└── react-scripts@5.0.1
    └── webpack@5.x.x

说明 Webpack 确实存在并正在为你工作！

---

🛠️ 如果你想修改 Webpack 配置怎么办？

有几种方式：

✅ 方法一：eject（不可逆）

npm run eject

• 这会将所有隐藏的配置（包括 Webpack、Babel、Jest 等）暴露出来。
• 之后你就可以自由修改 config/webpack.config.js。
• ⚠️ 注意：这个操作不可逆！

---

✅ 方法二：使用 craco（推荐）

CRACO（Create React App Configuration Override）是一个库，允许你在不 eject 的情况下覆盖 CRA 的 Webpack 配置。

安装：

npm install @craco/craco --save

修改 package.json 中的 scripts：

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

创建 craco.config.ts 或 craco.config.js 来添加自定义 Webpack 配置。

---

✅ 总结一句话：

Create React App（CRA）是基于 Webpack 构建的，但它隐藏了 Webpack 的复杂性，提供了一个更简单的开发体验。Webpack 确实在背后工作，只是你不需要自己写它的配置文件 。如果你需要定制化配置，可以通过 eject 或 craco 来实现。

---