Konfigurieren von Webpack in einem Create-React-App-Projekt

1. Was ist das create-react-app-Webpack in React?
2. Webpack-Konfigurationen und Dateien in React mit create-react-app auffinden
3. Ändern Sie die Webpack-Konfiguration von create-react-app in React

JavaScript-Bundler erleichtern den Entwicklungsprozess, indem sie separate Dateien zu einer kombinieren. Für Anfänger können Bundler ziemlich schwierig einzurichten sein.

Als das React-Framework vor einigen Jahren noch in den Kinderschuhen steckte, war die Community auf mehrere Bundler aufgeteilt. Das Team hinter dem Framework entschied sich, diese Teilung zu beenden und eine bevorzugte Lösung auszuwählen. Der von ihnen gewählte Bundler war Webpack, aber dieser Standard funktioniert bei einigen Leuten nicht.

Was ist das create-react-app-Webpack in React?

React hat ein Starterprojekt namens create-react-app zum Erstellen von Anwendungen. Nach der Installation stellt es eine Umgebung mit einer vorhandenen Webpack-Konfiguration bereit.

Der Einrichtungsprozess für das Webpack ist etwas kompliziert. Wenn Sie nicht wissen, was Sie tun, dauert das Einrichten eines Webpacks ewig und kann mehr schaden als nützen. Glücklicherweise übernimmt create-react-app all diese Arbeit für Sie.

create-react-app übernimmt im Hintergrund das gesamte Tooling für Sie. Auf diese Weise können sich Anfänger und fortgeschrittene React-Entwickler auf das Schreiben von Code konzentrieren, anstatt komplexe Einrichtungsprozesse durchzuführen.

Webpack-Konfigurationen und Dateien in React mit create-react-app auffinden

Einmal eingerichtet, enthält der Ordner eines create-react-app-Projekts viele andere Ordner. Wenn Sie nicht wissen, wo Sie suchen müssen, kann es schwierig sein, die Konfigurationsdateien für das Webpack zu finden.

Als ersten Schritt sollten Sie die Datei package.json öffnen. Hier finden Sie Informationen zu Abhängigkeiten und Tools, die in Ihrer App verwendet werden.

Scrollen Sie nach dem Öffnen der Datei nach unten zum Objekt 'scripts': {}. Sie werden vielleicht bemerken, dass create-react-app eine Bibliothek namens react-scripts verwendet.

Um die Konfigurationsdateien für das Webpack zu finden, sollten Sie zum Ordner node-modules gehen und das Verzeichnis react-scripts finden. Je nach Version der Bibliothek sollten Sie den Ordner config finden; Dieser Ordner enthält alle Konfigurationsdateien, einschließlich der für das Webpack.

Ändern Sie die Webpack-Konfiguration von create-react-app in React

Der einzige Nachteil der standardmäßigen Webpack-Konfiguration besteht darin, dass viele Annahmen getroffen werden. Einige React-Entwickler möchten die Standard-Webpack-Konfiguration von create-react-app ändern.

Das Starter-Projekt behandelt externe Module und Bibliotheken standardmäßig intern, sodass die Datei package.json sauber erscheint.

Dieses Standardverhalten ist nützlich, aber manchmal ist es besser, vollständige Informationen über Module anzuzeigen. Hier kommt npm run eject ins Spiel.

Wenn Sie diesen Befehl ausführen, sind die Informationen zu allen Ihren Modulen in package.json verfügbar. Das Ausführen dieses Befehls ist erforderlich, um die Webpack-Konfiguration Ihrer Anwendung zu bearbeiten.

Wenn Sie nicht wissen, was Sie tun, kann das Ausführen von npm run eject ziemlich riskant sein. Es ist jedoch möglich, die Webpack-Konfiguration Ihrer App zu ändern, ohne sie auszuwerfen.

Dazu können Sie die Bibliothek react-app-rewired verwenden. Um weitere Informationen über die Bibliothek zu erhalten, lesen Sie offizielle Dokumente.