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

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

https://i.stack.imgur.com/enyQL.png

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

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

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

---

这些文件位于您的 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 的目的不是担心这些。

从 documentation：

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

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

npm run eject

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

在大多数情况下，最好不要弹出并尝试以另一种方式使其为您工作。

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

---

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

---

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

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

---

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

---

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

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

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

---

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

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

---

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

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

解决方案 - use craco。

---

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

npm run eject

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

---

我将 create-react-app 与 craco 一起使用，当使用 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;
        },
    },
}

---

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

$ npm run eject

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

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

---