哪里是创建-反应-应用程序webpack配置和文件?

文件位于你的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

如果你想找到webpack文件和配置，去你的包。脚本 . json文件，寻找脚本

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

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

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

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

npm run eject

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

你可以在/配置文件夹中找到它。

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

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

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

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

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

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

我知道现在已经很晚了，但是对于将来偶然发现这个问题的人来说，如果你想要访问CRA的webpack配置，除了运行之外没有其他方法:

$ npm run eject

然而，使用弹出，您将从CRA更新管道中剥离自己，因此从弹出的角度来看，您必须自己维护它。

我遇到过这个问题很多次，因此我为react应用程序创建了一个模板，它具有与CRA大部分相同的配置，但也有额外的好处(如样式化组件，jest单元测试，Travis ci用于部署，更漂亮，ESLint等)，以使维护更容易。检查回购。

< p >…你现在“拥有”;配置。不会提供任何支援。继续进行 小心…< / p >

解决方案- 使用名。

我正在使用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;
},
},
}