Wo befindet sich die Webpack-Konfiguration und die Dateien für die Create-React-App?

172

Ich erstelle ein ReactJS-Projekt mit dem create-react-appPaket und das hat gut funktioniert, aber ich kann keine Webpack-Dateien und -Konfigurationen finden.

Wie funktioniert die React-Create-App mit Webpack? Wo befinden sich die Webpack-Konfigurationsdateien in einer Standardinstallation mit create-react-app? Ich kann keine Konfigurationsdateien in den Ordnern meines Projekts finden.

Ich habe keine Überschreibungskonfigurationsdatei erstellt. Ich kann Konfigurationseinstellungen mit anderen Artikeln verwalten, möchte aber die herkömmlichen Konfigurationsdateien finden.

javascript reactjs webpack ecmascript-6 create-react-app Mohammad
quelle

Antworten:

96

Wenn Sie Webpack-Dateien und -Konfigurationen suchen möchten, gehen Sie zu Ihrer package.json-Datei und suchen Sie nach Skripten

img

Sie werden feststellen , dass Skripte Objekt eine Bibliothek verwendet reagieren-Skripten

Gehen Sie nun zu node_modules und suchen Sie nach dem React -Script- Ordner React -Script-in-Node-Module

Dieser Ordner "React -Scripts / Scripts" und " React -Scripts / Config " enthält alle Webpack-Konfigurationen.

Vikram Thakur
quelle
1
Ich habe gesehen, aber ich habe keine Reaktionsskripte dir
Mohammad
4
Ich habe gerade eine App mit create-react-app erstellt und in meinem Fall gibt es in node_modules einen Ordner react-scripts. können Sie Ihr package.json
Vikram Thakur
5
Diese Antwort ist nicht mehr korrekt ist NPM nun flach alle Module auf der Wurzel sind Bedeutung node_modulesVerzeichnis
Vsync
4
Die eigentliche Webpack-Konfiguration finden Sie hier: github.com/facebook/create-react-app/blob/master/packages/…
protoEvangelion
Der häufigste Anwendungsfall wäre das Anpassen der Webpack-Konfiguration des Projekts. Aber wenn es sich in node_modules befindet, wird es bei jeder npm-Installation überschrieben, nicht wahr?
Blanc
59

Aus der Dokumentation :

Sie müssen keine Tools wie Webpack oder Babel installieren oder konfigurieren. Sie sind vorkonfiguriert und ausgeblendet, damit Sie sich auf den Code konzentrieren können.

Wenn Sie Zugriff auf die Konfigurationsdateien haben möchten, müssen Sie Folgendes ausführen :

npm run eject

Hinweis: Dies ist eine Einwegoperation. Sobald Sie ausgeworfen haben, können Sie nicht mehr zurück!

In den meisten Szenarien ist es am besten, nicht auszuwerfen und zu versuchen, einen Weg zu finden, damit es auf andere Weise für Sie funktioniert. Auf diese Weise können Sie Ihre Abhängigkeiten aktualisieren create-react-appund müssen sich nicht mit der Hölle der Webpack-Abhängigkeiten befassen.

klugjo
quelle
6
Ich weiß, dass diese versteckt sind, aber ich möchte wissen, wo diese sind und wie die React-Create-App mit dieser Fähigkeit umgeht.
Mohammad
Dann müssen Sie sich wahrscheinlich den Quellcode ansehen. Ich bin nicht sicher
klugjo
2
@Mohammad checke die Quelle für 'React-Scripts' aus. Dort findest du die gesamte Konfiguration
Jose Munoz
1
Beantwortet die Frage nicht, hat mir aber trotzdem geholfen
Hühnersuppe
32

Viele Leute kommen auf diese Seite mit dem Ziel, die Webpack-Konfiguration und -Dateien zu finden, um ihnen ihre eigene Konfiguration hinzuzufügen. Eine andere Möglichkeit, dies ohne Laufen zu erreichen, npm run ejectist die Verwendung von React-App-Rewired . Auf diese Weise können Sie Ihre Webpack-Konfigurationsdatei überschreiben, ohne sie auszuwerfen.

jjbskir
quelle
6
Ist es immer noch die bevorzugte Lösung? Es gibt diese Warnung für neu verkabelte Projekte: github.com/timarney/react-app-rewired#rewire-your-app- : "Ab Create React App 2.0 wird dieses Repo zu diesem Zeitpunkt hauptsächlich von der Community" leicht "gepflegt. .. Hinweis: Ich persönlich verwende next.js oder Razzle, die beide standardmäßig benutzerdefiniertes Webpack unterstützen. "
Anthony Kong
24

Angenommen, Sie möchten nicht auswerfen und möchten sich nur die Konfiguration ansehen, in der Sie sie finden /node_modules/react-scripts/config

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

Sie finden es im Ordner / config .

Wenn Sie auswerfen, erhalten Sie eine Nachricht wie: 

 Adding /config/webpack.config.dev.js to the project
 Adding /config/webpack.config.prod.js to the project
Alfrex92
quelle
3

Versuchen Sie, die Konfigurationsdateien auszuwerfen, indem Sie Folgendes ausführen:

npm run eject

Dann finden Sie einen Konfigurationsordner, der in Ihrem Projekt erstellt wurde. Sie finden Ihre Webpack-Konfigurationsdateien init.

Vinayak humberi
quelle
0

Ich weiß, dass es ziemlich spät ist, aber für zukünftige Leute, die über dieses Problem stolpern, gibt es keinen anderen Weg, als wenn Sie auf die Webpack-Konfiguration von CRA zugreifen möchten:

$ npm run eject

Mit dem Auswerfen entfernen Sie sich jedoch von der CRA-Pipeline an Aktualisierungen. Daher müssen Sie diese vom Auswurfpunkt aus selbst warten.

Ich bin schon oft auf dieses Problem gestoßen und habe daher eine Vorlage für Reaktions-Apps erstellt, die fast die gleiche Konfiguration wie CRA haben, aber auch zusätzliche Vorteile (wie gestylte Komponenten, Scherz-Unit-Test, Travis CI für Bereitstellungen, hübscher) , ESLint usw.)), um die Wartung zu vereinfachen. Schauen Sie sich das Repo an .

Humbledore
quelle