Wie werden Webpack-Elemente in mehreren Seiten zusammengefasst, die nicht mit anderen Assets verknüpft sind?

Question

Es gibt etwas, das ich über Webpack nicht verstehen konnte. Die meisten Webpack-Beispiele zeigen einen Haupteingangspunkt app.js, der alle anderen reaktiven Komponenten für Webpack importiert, um rekursiv eine resultierende Datei zu erstellen. Wenn es mehrere Einstiegspunkte wie pageA.js und pageB.js gäbe, werden sie in ein Array im Eingabeargument eingefügt.

Mein Problem ist jedoch, dass mein "Haupt" -Einstiegspunkt nicht jede einzelne Komponente verwendet und importiert. Vielleicht nur ein paar. Auf SeiteA kann ich nur ComponentA und ComponentB importieren. Auf SeiteB kann ich nur ComponentB und ComponentC importieren. Dann kann ich in der main.js auf meiner MainPage nur ComponentD importieren.

Ich kann main.js, PageA und PageB alle in meine Einstiegspunkte setzen. Aber bedeutet das, dass ich jedes Mal, wenn ich eine neue Seite habe, zur Eintragsliste in der Webpack-Konfiguration hinzufügen muss?

Wie soll ich dieses Szenario mit Webpack angehen?

Answer 1

Die Webpack-Konfiguration ist eigentlich ein JS-Modul. Dies bedeutet, dass das zurückgegebene Objekt programmgesteuert und nicht manuell erstellt werden kann.

Was Sie wollen, ist für Webpack zu handle chunks optimization properly for you. Dies, zusammen mit der programmatischen Bestimmung der Seiten, die Sie haben, sollte Ihnen erlauben, all Ihre Assets zu generieren.

Answer 2

Das Setup ist eine typische mehrseitige Webpack-App, die normalerweise aus einem gemeinsamen/Lieferanten-Bundle (Einstiegspunkt) und separaten Bundles (Einstiegspunkten) für jede Seite besteht, wie SeiteA und SeiteB.

Für jede Seite müssen Sie zunächst das allgemeine/Vendor-Paket einbeziehen und dann das seitenspezifische Paket einbeziehen.

<script src="common.js"> 
<script src="PageA.js"> 

Werfen Sie einen Blick auf multiple-entry-points und multiple-commons-chunks. Webpack kann die gemeinsamen Deps automatisch extrahieren und bündeln (1. Beispiel), oder Sie können angeben, welche Depots in welche gemeinsamen Chucks (2. Beispiel) gehen sollen. Werfen Sie auch einen Blick auf common-chunk-and-vendor-chunk, die perfekt erklärt, wie gängige Chuck funktioniert.

Entsprechend Ihrer Beschreibung ist Ihr Setup sehr ähnlich dem ersten Beispiel (Multiple-Entry-Points).

Und ja, Sie müssen wahrscheinlich einen neuen Eintrag hinzufügen, wenn Sie eine neue Seite haben, wie PageC.