Create React App做了啥？让你脱离React的Webpack之谜！

Create React App (CRA) 是一个官方支持的、用于创建 React 项目的脚手架工具。它可以帮助我们快速轻松地搭建一个 React 项目，而无需手动配置 Webpack 和其他构建工具。

本文将深入解析 CRA 脚手架的 Webpack 配置，了解脚手架是如何帮助我们创建 React 项目的，以及如何根据需要自定义 Webpack 配置。

CRA 脚手架是如何工作的？

CRA 脚手架使用 npm 包 create-react-app 来创建 React 项目。当我们运行 create-react-app my-app 命令时，脚手架会自动下载并安装必要的依赖项，并创建一个新的项目目录 my-app。

在 my-app 目录中，我们可以找到以下文件和目录：

• node_modules/：包含了所有依赖项的目录。
• package.json：项目配置文件，包含了项目名称、版本、依赖项等信息。
• public/：包含了静态资源的目录，如 HTML、CSS 和图像文件。
• src/：包含了源代码的目录。
• webpack.config.js：Webpack 配置文件。

CRA 脚手架的 Webpack 配置

CRA 脚手架的 Webpack 配置位于 webpack.config.js 文件中。该配置文件定义了如何将源代码编译成最终的 JavaScript 文件。

Webpack 配置文件的内容比较复杂，但我们可以从中提取出一些关键信息：

• 入口文件 ：src/index.js。这是应用程序的入口文件，Webpack 将从这里开始构建应用程序。

• 输出文件 ：build/static/js/main.js。这是最终的 JavaScript 文件，它包含了应用程序的所有代码。

• 加载器 ：Webpack 使用加载器来将源代码转换为 JavaScript。CRA 脚手架默认使用了以下加载器：

  • babel-loader：将 JavaScript 代码转换为 ES5 代码。
  • css-loader：将 CSS 代码转换为 JavaScript 代码。
  • style-loader：将 JavaScript 代码插入到 HTML 文档中。

• 插件 ：Webpack 使用插件来扩展其功能。CRA 脚手架默认使用了以下插件：

  • html-webpack-plugin：生成 HTML 文件。
  • clean-webpack-plugin：清理构建目录。
  • copy-webpack-plugin：复制静态资源到构建目录。

如何自定义 Webpack 配置？

我们可以通过修改 webpack.config.js 文件来自定义 Webpack 配置。例如，我们可以添加新的加载器或插件，或者修改现有加载器或插件的配置。

需要注意的是，修改 Webpack 配置可能会导致应用程序构建失败。因此，在修改 Webpack 配置之前，请务必仔细阅读官方文档。

总结

CRA 脚手架是一个非常有用的工具，它可以帮助我们快速轻松地创建 React 项目。CRA 脚手架的 Webpack 配置是比较复杂的，但我们可以通过修改 webpack.config.js 文件来自定义 Webpack 配置。

希望本文能够帮助您更好地理解 CRA 脚手架的 Webpack 配置，以及如何根据需要自定义 Webpack 配置。