在 Create-React-App 项目中配置 Webpack

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 什么是 React 中的 create-react-app Webpack
  2. 在 React 中找到 create-react-app Webpack 配置和文件
  3. 在 React 中更改 create-react-app 的 Webpack 配置
在 Create-React-App 项目中配置 Webpack

JavaScript 捆绑器通过将单独的文件合并为一个来促进开发过程。对于初学者来说,捆绑器可能很难设置。

几年前,当 React 框架仍处于起步阶段时,社区被多个捆绑器分开。框架背后的团队决定停止这种划分并选择一个首选解决方案。他们选择的捆绑器是 webpack,但默认的对某些人不起作用。

什么是 React 中的 create-react-app Webpack

React 有一个名为 create-react-app 的启动项目,用于构建应用程序。安装后,它会提供一个具有现有 webpack 配置的环境。

webpack 的设置过程有点复杂。如果你不知道自己在做什么,那么设置一个 webpack 将花费很长时间,而且它可能弊大于利。幸运的是,create-react-app 为你完成了所有这些工作。

在后台,create-react-app 会为你处理所有工具。这样,初学者和中级 React 开发人员可以专注于编写代码,而不是复杂的设置过程。

在 React 中找到 create-react-app Webpack 配置和文件

设置完成后,create-react-app 项目的文件夹包含许多其他文件夹。除非你知道去哪里寻找,否则很难找到 webpack 的配置文件。

作为第一步,你应该打开 package.json 文件。在这里你可以找到有关应用程序上使用的依赖项和工具的信息。

打开文件后,向下滚动到 'scripts': {} 对象。你可能会注意到 create-react-app 使用了一个名为 react-scripts 的库。

要找到 webpack 的配置文件,你应该转到 node-modules 文件夹并找到 react-scripts 目录。根据库的版本,你应该找到 config 文件夹;此文件夹包含所有配置文件,包括用于 webpack 的配置文件。

在 React 中更改 create-react-app 的 Webpack 配置

默认 webpack 配置的唯一缺点是它做了很多假设。一些 React 开发人员想要更改 create-react-app 的默认 webpack 配置。

默认情况下,启动项目在内部处理外部模块和库,因此 package.json 文件看起来很干净。

此默认行为很有用,但有时最好显示有关模块的完整信息。这就是 npm run eject 的用武之地。

如果你运行这个命令,关于你所有模块的信息将在 package.json 中可用。运行此命令是编辑应用程序的 webpack 配置所必需的。

除非你知道自己在做什么,否则运行 npm run eject 可能会有很大风险。但是,可以在不弹出应用程序的情况下更改应用程序的 webpack 配置。

为此,你可以使用名为 react-app-rewired 的库。要获取有关该库的更多信息,请阅读官方文档

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn