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

Question

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

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

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

Answer 1

如果要查找webpack文件和配置,请转到package.json文件并查找脚本

您会发现scripts对象正在使用库react-scripts

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

此react-scripts/scripts和react-scripts/config文件夹包含所有webpack配置.

最常见的用例是自定义项目的 webpack 配置。但如果它在 node_modules 中，它将在每次 npm 安装中被覆盖，不是吗？ (5认同)
我刚刚使用create-react-app创建了一个应用程序,在我的例子中,node_modules中有一个文件夹react-scripts.你可以分享你的package.json吗？ (4认同)
**这个答案不再正确**,NPM现在是*flat*意味着所有模块都在根`node_modules`目录下 (3认同)
实际的webpack配置在这里:https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js (3认同)
我看到了，但我没有 react-scripts 目录 (2认同)

Answer 2

您无需安装或配置Webpack或Babel等工具.它们是预先配置和隐藏的,因此您可以专注于代码.

如果要访问配置文件,则需要通过运行弹出:

npm run eject

注意:这是单向操作.一旦弹出,你就无法回去!

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

Answer 3

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

还是首选的解决方案？在重新布线的项目上会出现以下警告：https://github.com/timarney/react-app-rewired#rewire-your-app-：“从Create React App 2.0开始，此仓库主要由社区“轻度”维护注意：我个人使用了next.js或Razzle，它们都支持开箱即用的自定义Webpack。” (4认同)
@AnthonyKong 感谢这次更新，情况真的很糟糕...中央上游讨论似乎位于：https://github.com/facebook/create-react-app/issues/6303 (3认同)

Answer 4

Answer 5

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

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

Answer 6

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

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

Answer 7

你可以在/ config文件夹中找到它.

当您弹出时,您会收到如下消息:

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

Answer 8

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

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

解决方案-使用craco。