Konfiguration des Webpack-Kernkonzepteintrags (Eintrag)

Wenn die Abhängigkeiten jedes Moduls im Projekt als Baum betrachtet werden, ist der Eintrag die Wurzel des Abhängigkeitsbaums.

Diese abhängigen Module werden beim Packen in einen Block gekapselt. Was ist also ein Chunk?

Chunk bedeutet wörtlich Codeblock, was in Webpack als abstrahierte und gepackte Module verstanden werden kann. Es ist wie eine Aktentasche, die viele Dateien enthält. Jedes Modul fügt außen eine Verpackungsschicht hinzu, um einen Block zu bilden.

Abhängig von der spezifischen Konfiguration können beim Packen eines Projekts ein oder mehrere Chunks generiert werden.

Im Projekt können mehrere Einträge definiert werden, und jeder Eintrag generiert eine Ergebnisressource.

Beispielsweise gibt es in unserem Projekt zwei Einträge, src/index.js und src/lib.js . Unter normalen Umständen, dist/index.js und dist/lib.js

In einigen Sonderfällen kann ein Eintrag mehrere Chunks und letztendlich mehrere Bundle-

Einträge generieren.

Parameter: Der

Eintragseintrag ist der Eingang zum Konfigurationsmodul, der in die Eingabe abstrahiert werden
• kann
• . Der erste Schritt der Webpack-Ausführung besteht darin, alle eintragsabhängigen Module zu durchsuchen
• Ausgefüllt meldet Webpack einen Fehler und beendet

module.exports = {
	Eintrag:'./src/index.js', //Gibt die Eintragsdatei an, d. h. die Eingabe unseres Projekts aus index.js};

①Beispiel

Wenn es sich um einen Array-Typ handelt, wenn er mit der Ausgabe verwendet wird. Bibliothekskonfigurationselement, nur das letzte im Array. Das Modul der Eintragsdatei wird exportiert.

② Chunk-Name.

Webpack gibt jedem generierten Chunk einen Namen. Der Name des Chunks hängt mit der Konfiguration des Eintrags

• zusammen Ist eine Zeichenfolge oder ein Array, wird zu diesem Zeitpunkt nur ein Chunk generiert.
• Wenn es sich bei dem Eintrag um ein Objekt handelt, werden möglicherweise mehrere Chunks angezeigt Geben Sie das Schlüssel-Wert-Paar des Objekts ein.

③Eintragskonfigurationsdynamik.

Wenn das Projekt mehrere Seiten enthält, muss für jede Seite ein Eintrag konfiguriert werden wird von anderen Faktoren beeinflusst und kann nicht als statischer Wert geschrieben werden. Die Lösung besteht darin, den Eintrag in eine Funktion zu setzen, um die oben genannte Konfiguration dynamisch zurückzugeben. Der Code lautet wie folgt:

// Synchroner Funktionseintrag: () => {.
  zurückkehren {
    a:'./pages/a',
    b:'./pages/b',
  }
};
// Asynchroner Funktionseintrag: () => {
  return new Promise((resolve)=>{
    lösen({
       a:'./pages/a',
       b:'./pages/b',
    });
  });
};

Parameter: context

Webpack verwendet context als Stammverzeichnis, wenn nach Dateien mit relativen Pfaden gesucht wird . Context verwendet standardmäßig das aktuelle Arbeitsverzeichnis, in dem Webpack gestartet wird. Wenn Sie die Standardkonfiguration des Kontexts ändern möchten, können Sie dies in der Konfigurationsdatei wie folgt festlegen:

module.exports = {
	Kontext: path.resolve(__dirname, 'app')
}

Beachten Sie, dass der Kontext eine absolute Pfadzeichenfolge sein muss.

Konfiguration der Kontext-Einzeleintragsdatei

, indem Sie beim Starten von Webpack den Parameter webpack --context angeben.

Verwendung: entry:string|Array<string>

1. Abgekürzte Syntax

webpack.config.js

// Da es sich um eine Single handelt, kann es wie folgt abgekürzt werden:
module.exports = {
  Eintrag: './main.js'
};

Die obige Eintragskonfiguration wird tatsächlich als folgende Abkürzung geschrieben:

module.exports = {
  Eintrag: {
    main: './main.js'
  }
};

2. Array-Syntax

module.exports = {
  Eintrag: {
    main:['./main.js','./main2.js']
  }
};

Die Funktion der Übergabe eines Arrays besteht darin, mehrere Ressourcen im Voraus zusammenzuführen. Beim Packen verwendet Webpack das letzte Element im Array als tatsächlichen

Eintragspfad Möglichkeit, den Chunk-Namen zu ändern, kann nur der Standardwert „main“ sein.

Konfiguration mehrerer Eintragsdateien

Verwendung: entry: {[entryChunkName: string]: string|Array}

Objektsyntax

module.exports = {
  Eintrag: {
    app: './src/app.js',
    Anbieter: './src/vendors.js'
  }
};

Das wird umständlicher sein. Dies ist jedoch die erweiterbarste Möglichkeit, Einstiegspunkte in einer Anwendung zu definieren.

„Erweiterbare Webpack-Konfiguration“ : wiederverwendbar und mit anderen Konfigurationen kombinierbar. Dies ist eine beliebte Technik zur Trennung von Bedenken hinsichtlich der Umgebung, dem Build-Ziel und der Laufzeit. Führen Sie sie dann mit speziellen Tools wie webpack-merge zusammen.

Anwendungsszenarien

1. Einzelseitenanwendungen

, unabhängig davon, ob es sich um Frameworks, Bibliotheken oder Module auf jeder Seite handelt, werden von einem einzigen Einstiegspunkt von app.js referenziert. Dies hat den Vorteil, dass nur eine JS-Datei generiert wird und die Abhängigkeiten klar sind .

module.exports = {
  Eintrag: './src/app.js'
};

Dieser Ansatz hat auch Nachteile, das heißt, wenn die Skalierung der Anwendung auf ein bestimmtes Niveau ansteigt, wird das generierte Ressourcenvolumen zu groß, was die Seitenrendergeschwindigkeit des Benutzers

verringert Konfiguration von Webpack: Wenn ein Bundle größer als 250 KB (vor der Komprimierung) ist, wird das Bundle als zu groß betrachtet und beim Packen wird eine Warnung angezeigt, wie in der Abbildung dargestellt:

2. Trennen Sie die Bibliothek eines Drittanbieters (Anbieter),

um das oben genannte Problem zu lösen.

In Webpack bezieht sich der Begriff „Anbieter“ im Allgemeinen auf Drittanbieter und vom Projekt verwendete Frameworks

.
  Eintrag: {
    app: './src/app.js',
    Anbieter: ['react','react-dom','react-router'],
  }
};

Basierend auf dem Anwendungsbeispiel haben wir einen neuen Eingang mit dem Chunk-Namen vendor hinzugefügt und die Drittanbietermodule, von denen das Projekt abhängt, in Form eines Arrays abgelegt.

Wir haben den Eintragspfad für den „vendor“ nicht festgelegt . Was soll Webpack tun?

Zu diesem Zeitpunkt können wir CommonsChunkPlugin verwenden (CommonsChunkPlugin wurde nach Webpack 4 aufgegeben, Sie können „optimierung.splitChunks“ verwenden), um die gemeinsamen Module in den beiden Blöcken „App“ und „Vendor“ zu extrahieren.

Mit dieser Konfiguration wird nur das von app.js generierte Bundle verwendet enthalten Das Geschäftsmodul und die von ihm abhängigen Drittanbietermodule werden extrahiert, um ein neues Bundle zu generieren, wodurch auch unser Ziel erreicht wird, den Anbieter zu extrahieren.

Da der Anbieter nur Drittanbietermodule enthält, wird sich dieser Teil nicht häufig ändern. Daher kann das clientseitige Caching effektiv genutzt werden, was die Gesamtrendergeschwindigkeit beschleunigt, wenn der Benutzer die Seite anschließend anfordert.

CommonsChunkPlugin wird hauptsächlich zum Extrahieren von Bibliotheken und öffentlichen Modulen von Drittanbietern verwendet, um zu verhindern, dass Bundle-Dateien, die auf dem ersten Bildschirm geladen werden, oder Bundle-Dateien, die bei Bedarf geladen werden, zu groß sind, was zu langen Ladezeiten führt.

3. Mehrseitige Anwendung

Bei mehrseitigen Anwendungsszenarien hoffen wir, dass jede Seite nur ihre eigene erforderliche Logik lädt, anstatt alle Seiten in dasselbe Paket zu packen, um die Größe der Ressourcen so weit wie möglich zu reduzieren. Daher benötigt jede Seite ein unabhängiges Bundle . In diesem Fall verwenden wir mehrere Einträge, um dies zu erreichen. Sehen Sie sich bitte das folgende Beispiel an:

module.exports = {
  Eintrag: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

Die obige Konfiguration teilt dem Webpack mit, dass es drei unabhängige und getrennte Abhängigkeitsdiagramme benötigt. Zu diesem Zeitpunkt stehen der Eintrag und die Seite in einer Eins-zu-Eins-Entsprechung, sodass jedes HTML die benötigten Module laden kann, solange es eingeführt wird sein eigenes JS.