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

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.

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

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.

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.

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.

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`

Die von verwendete Webpack-Konfiguration finden Sie create-react-apphier: https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

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

Die Webpack-Konfiguration wird von React -Skripten übernommen . Sie finden alle Webpack-Konfigurationen in node_modules react-scripts / config .

Und wenn Sie die Webpack-Konfiguration anpassen möchten, können Sie dieser benutzerdefinierten Webpack-Konfiguration folgen

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.

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 .