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

where is create-react-app webpack config and files?

提问by Mohammad

I create a ReactJS project with the create-react-apppackage and that worked well, but I cannot find webpack files and configurations.

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

How does react-create-app work with webpack? Where are the webpack configuration files located in a default installation with create-react-app? I'm unable to find configuration files in my project's folders.

react-create-app 如何与 webpack 配合使用？默认安装中的 webpack 配置文件在哪里create-react-app？我无法在我的项目文件夹中找到配置文件。

I have not created an override config file. I can manage config settings with other articles but I want to find the conventional config file(s).

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

回答by Vikram Thakur

If you want to find webpack files and configurations go to your package.json file and look for scripts

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

You will find that scripts object is using a library react-scripts

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

Now go to node_modules and look for react-scripts folder react-script-in-node-modules

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

This react-scripts/scriptsand react-scripts/configfolder contains all the webpack configurations.

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

回答by klugjo

From the documentation:

从文档：

You don't need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

您不需要安装或配置 Webpack 或 Babel 之类的工具。它们是预先配置和隐藏的，以便您可以专注于代码。

If you want to have access to the config files, you need to ejectby running:

如果你想访问配置文件，你需要通过运行来弹出：

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

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

In most scenarios, it is best not to eject and try to find a way to make it work for you in another way. That way, you can update your dependencies through create-react-appand not have to deal with Webpack dependency hell.

在大多数情况下，最好不要弹出并尝试以另一种方式找到适合您的方法。这样，您可以通过更新您的依赖项create-react-app而不必处理 Webpack 依赖项地狱。

回答by jjbskir

A lot of people come to this page with the goal of finding the webpack config and files in order to add their own configuration to them. Another way to achieve this without running npm run ejectis to use react-app-rewired. This allows you to overwrite your webpack config file without ejecting.

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

回答by vv1z

Assuming you don't want to eject and you just want to look at the config you will find them in /node_modules/react-scripts/config

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

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

回答by Mihai Rotaru

Webpack config used by create-react-appis here: https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

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

回答by Alfrex92

You can find it inside the /configfolder.

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

When you eject you get a message like:

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

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

回答by Hassan Ajaz

Webpack configuration is being handled by react-scripts. You can find all webpack config inside node_modules react-scripts/config.

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

And If you want to customize webpack config, you can follow this customize-webpack-config

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

回答by Vinayak humberi

Try ejecting the config files, by running:

尝试弹出配置文件，运行：

npm run eject

then you'll find a config folder created in your project. You will find your webpack config files init.

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

回答by Humbledore

I know it's pretty late, but for future people stumbling upon this issue, if you want to have access to the webpack config of CRA, there's no other way except you have to run:

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

$ npm run eject

However, with ejection, you'll strip away yourself from CRA pipeline of updates, therefore from the point of ejection, you have to maintain it yourself.

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

I have come across this issue many times, and therefore I've created a template for react apps which have most of the same config as CRA, but also additional perks (like styled-components, jest unit test, Travis ci for deployments, prettier, ESLint, etc...) to make the maintenance easier. Check out the repo.

我多次遇到过这个问题，因此我为 React 应用程序创建了一个模板，这些应用程序的配置与 CRA 的大部分配置相同，但还有额外的好处（如样式组件、jest 单元测试、用于部署的 Travis ci，更漂亮、ESLint 等...）使维护更容易。查看repo。