create-react-app webpack 配置和文件在哪里？

Question

我使用create-react-app包创建了一个 ReactJS 项目并且运行良好，但是我找不到 webpack 文件和配置。

react-create-app 如何与 webpack 配合使用？ 使用create-react-app的默认安装中的 webpack 配置文件在哪里？ 我无法在我的项目文件夹中找到配置文件。

我还没有创建覆盖配置文件。 我可以使用其他文章管理配置设置，但我想找到传统的配置文件。

Answer 1

如果您想查找 webpack 文件和配置，请转到您的 package.json 文件并查找脚本

你会发现脚本对象正在使用一个库react-scripts

现在转到 node_modules 并查找 react-scripts 文件夹react-script-in-node-modules

这个react-scripts/scripts和react-scripts/config文件夹包含所有的 webpack 配置。

Answer 2

这些文件位于您的node_modules/react-scripts文件夹中：

网络包配置：

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js

启动脚本：

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/start.js

构建脚本：

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/build.js

测试脚本：

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/test.js

等等...

现在，CRA 的目的不是担心这些。

从文档：

您不需要安装或配置 Webpack 或 Babel 之类的工具。 它们是预先配置和隐藏的，以便您可以专注于代码。

如果你想访问配置文件，你需要通过运行来弹出：

npm run eject

注意：这是一种单向操作。 一旦弹出，就无法返回！

在大多数情况下，最好不要弹出并尝试以另一种方式找到适合您的方法。

如果您需要覆盖某些配置选项，您可以查看https://github.com/gsoft-inc/craco

Answer 3

很多人来到这个页面的目的是找到 webpack 配置和文件，以便将他们自己的配置添加到它们中。 另一种无需运行npm run eject即可实现此目的的方法是使用react-app-rewired 。 这允许您在不弹出的情况下覆盖您的 webpack 配置文件。

Answer 4

假设您不想弹出并且只想查看配置，您会在/node_modules/react-scripts/config找到它们

webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`

Answer 5

create-react-app使用的 Webpack 配置在这里： https : //github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

Answer 6

您可以在/config文件夹中找到它。

当您弹出时，您会收到如下消息：

 Adding /config/webpack.config.dev.js to the project
 Adding /config/webpack.config.prod.js to the project

Answer 7

Webpack 配置由react-scripts处理。 您可以在 node_modules react-scripts/config 中找到所有 webpack配置。

如果你想自定义 webpack 配置，你可以按照这个custom-webpack-config

Answer 8

尝试弹出配置文件，运行：

npm run eject

然后你会发现在你的项目中创建了一个 config 文件夹。 你会发现你的 webpack 配置文件 init.d 。

Answer 9

弹出不是最好的选择，也不是在node_modules下编辑node_modules 。 react-app-rewired未维护并有警告：

...您现在“拥有”配置。 将不提供任何支持。 谨慎行事...

解决方案 -使用 craco 。

Answer 10

我知道现在已经很晚了，但是对于未来遇到这个问题的人来说，如果您想访问 CRA 的 webpack 配置，除了必须运行之外别无他法：

$ npm run eject

但是，通过弹出，您将脱离 CRA 更新管道，因此从弹出的角度来看，您必须自己维护它。

我多次遇到过这个问题，因此我为 React 应用程序创建了一个模板，该模板与 CRA 的配置大部分相同，但还有额外的好处（如样式组件、jest 单元测试、用于部署的 Travis ci，更漂亮、ESLint 等...）使维护更容易。 查看repo 。