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

Question

我创建了一个带有create-react-app包的ReactJS项目，该项目运行良好，但我找不到webpack文件和配置。

react-create-app如何与webpack一起使用？ webpack配置文件位于具有create-react-app的默认安装中的哪个位置？我无法在项目的文件夹中找到配置文件。

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

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

来自documentation：

  

您无需安装或配置W​​ebpack或Babel等工具。   它们是预先配置和隐藏的，因此您可以专注于代码。

如果您想要访问配置文件，则需要eject运行：

npm run eject

  

注意：这是单向操作。一旦你弹出，你就不能回去了！

在大多数情况下，最好不要弹出并试图找到一种方法让它以另一种方式为您工作。这样，您可以通过create-react-app更新您的依赖项，而不必处理Webpack依赖地狱。

Answer 3

许多人来到此页面的目的是查找webpack配置和文件，以便向其添加自己的配置。在不运行npm run eject的情况下实现此目标的另一种方法是使用react-app-rewired。这使您可以覆盖webpack配置文件而不会弹出。

Answer 4

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

Answer 5

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

弹出时，您会收到类似以下消息：

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

Answer 6

假设您不想弹出，而只想查看配置，则会在/ node_modules / react-scripts / config中找到它们 webpack.config.dev.js. //used by `npm start` webpack.config.prod.js //used by `npm run build`

Answer 7

在node_modules下编辑内容不是最好的选择。 react-app-rewired未维护，并显示警告：

...您现在“拥有”配置。不提供任何支持。继续 小心点...

解决方案-use craco。

Answer 8

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

如果要自定义Webpack配置，则可以遵循此customize-webpack-config

Answer 9

尝试通过运行以下命令弹出配置文件：

npm run eject

然后您将找到在项目中创建的配置文件夹。你会发现你的webpack配置文件初始化。

Answer 10

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

$ npm run eject

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

我已经多次遇到这个问题，因此我为React应用程序创建了一个模板，该应用程序具有与CRA大部分相同的配置，但也有其他好处（例如样式组件，笑话单元测试，Travis ci for部署，更漂亮，ESLint等...）来简化维护。签出repo。