很多人来到这个页面的目的是寻找webpack配置和文件，以便将自己的配置添加到其中。另一种不运行npm run eject的方法是使用react-app-rewired。这允许你覆盖你的webpack配置文件而不弹出。

我正在使用craco的create-react-app，当我用craco.config.js更新到webpack 5时，我能够覆盖我的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;
        },
    },
}

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

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

尝试弹出配置文件，通过运行:

npm run eject

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

这些文件位于你的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之类的工具。 它们是预配置和隐藏的，以便您可以专注于代码。

如果你想要访问配置文件，你需要通过运行以下命令来弹出:

npm run eject

注意:这是一个单向操作。一旦弹射出去，就回不去了!

在大多数情况下，最好不要弹出，试着找到另一种方式让它为你工作。

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

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

当你弹出时，你会收到这样的消息:

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