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

Question

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

create-react-app 工具如何与 webpack 协同工作？在默认安装的情况下，create-react-app 会将 webpack 配置文件放在哪里？我无法在项目文件夹中找到配置文件。

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

- Mohammad

Answer 1

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

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

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

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

- Vikram Thakur

---

我看到了，但我没有react-scripts目录。 - Mohammad

我刚使用create-react-app创建了一个应用程序，在我的情况下，node_modules中有一个名为react-scripts的文件夹。你能分享一下你的package.json吗？ - Vikram Thakur

这个回答已经不再正确，现在的 NPM 是“扁平化”的，也就是说所有模块都在根目录的 node_modules 中。 - vsync

Webpack的实际配置在这里：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js - protoEvangelion

最常见的用例是自定义项目的webpack配置。但如果它在node_modules中，它会在每次npm安装时被覆盖，是吗？ - Blanc

Answer 2

文件位于您的node_modules/react-scripts文件夹中: Webpack配置: 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等工具。它们已经预配置并隐藏，以便您可以专注于编写代码。” 如果您想访问配置文件，则需要通过运行以下命令进行弹出: eject

npm run eject

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

在大多数情况下，最好不要弹出并尝试找到另一种方法让它为您工作。

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

- klugjo

---

我知道这些是隐藏的，但我想知道它们在哪里以及react-create-app如何处理这种能力？ - Mohammad

那么你可能需要查看源代码。我不确定。 - klugjo

@Mohammad，请检查'react-scripts'的源代码，你可以在那里找到所有的配置。 - Jose Munoz

虽然没有回答问题，但还是对我有所帮助。 - dǝɥɔS ʇoıןןƎ

看起来 Craco 目前在 create-react-app 5 上遇到了一些问题。自1月以来，他们一直在修补这个问题，但五个月过去了，仍然没有完成 https://github.com/gsoft-inc/craco/issues/378 - Shwheelz

Craco是一个不错的选择。它提供了webpack、babel、eslint等的覆盖，而无需弹出[https://craco.js.org/docs/configuration/getting-started/]。同时也解决了CRA5的问题[https://github.com/dilanx/craco/issues/426#issuecomment-1307319525]。 - danb4r

Answer 3

许多人来到此页面的目的是为了找到webpack配置文件，以便添加自己的配置。除了运行npm run eject之外，另一种方法是使用react-app-rewired。这允许您在不弹出的情况下覆盖webpack配置文件。

- jjbskir

---

这个项目还是首选解决方案吗？这个项目的警告如下：https://github.com/timarney/react-app-rewired#rewire-your-app-“从Create React App 2.0版本开始，这个仓库目前只是由社区“轻微”维护...注意：我个人使用next.js或Razzle，它们都可以直接支持自定义的Webpack。” - Anthony Kong

@AnthonyKong 感谢您的更新，情况真的很糟糕...核心上游讨论似乎在这里：https://github.com/facebook/create-react-app/issues/6303 - Ciro Santilli OurBigBook.com

Answer 4

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

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

- vv1z

Answer 5

create-react-app使用的Webpack配置位于此处：https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

- Mihai Rotaru

---

那个打包好的webpack.config.js文件里有很多东西。想象一下从头开始构建它！ - Andrew Fielden

@AndrewFielden 想象一下当它没有按照你的期望工作时，你必须深入挖掘它的情况！ - Mihai Rotaru

Answer 6

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

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

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

- Alfrex92

Answer 7

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

如果你想自定义 webpack 配置，可以参考这篇文章：customize-webpack-config

- Hassan Ajaz

---

链接标记为 customize-webpack-config 的说明依赖于 react-app-rewired，根据其 GitHub README，该工具大多数情况下未得到维护。 - Eponymous

Answer 8

强烈不建议弹出操作以及在node_modules下编辑任何内容。react-app-rewired已不再维护，且存在以下警告：

...您现在“拥有”这些配置。 将不提供支持。请谨慎操作...

解决方案 - 使用 craco。

- valk

---

craco 无法与 react-scripts 5 兼容。 - tutiplain

@tutiplain，你知道有没有一个可以与 CRA 5 兼容的工具吗？ - Janis Jansen

@JanisJansen 我不这么认为。我需要这个是因为我的项目中使用了一些嵌入在 node_modules 深处的 LESS。最终，我直接使用 less 编译器，并将生成的样式表直接嵌入到 React 代码中。 - tutiplain

Answer 9

我正在使用 create-react-app 和 craco，并且当我更新 webpack 5 时，我能够通过 craco.config.js 覆盖我的 webpack 配置：

module.exports = {
    style: {
        postcssOptions: {
            plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
            ],
        },
    },
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            // eslint-disable-next-line no-param-reassign
            webpackConfig.resolve.fallback = {
                fs: false,
            };
            return webpackConfig;
        },
    },
}

- therightstuff

Answer 10

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

```shell npm run eject ```

npm run eject

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

- Vinayak humberi

---

请注意，这是一个重大的步骤，您不能轻易地回到原来的状态。这将是一个相当激烈的解决方案来消除警告。 - scrozier