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

1. 什么是 React 中的 create-react-app Webpack
2. 在 React 中找到 create-react-app Webpack 配置和文件
3. 在 React 中更改 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 的库。要获取有关该库的更多信息，请阅读官方文档。