Ein Anfängerleitfaden für Webpack

In diesem Artikel wird WebPack untersucht - einen leistungsstatischen statischen Modulpacker, der Webentwicklungs -Workflows vereinfacht und optimiert. Obwohl die Webpack -Dokumentation detailliert ist, können Anfänger immer noch vor dem Problem einer steilen Lernkurve konfrontiert sind. Dieses Tutorial soll Ihnen helfen, die Kernkonzepte von Webpack zu beherrschen und Sie Schritt für Schritt durch praktische Vorgänge zu führen.

Kernpunkte:

• Webpack -Grundlagen: WebPack behandelt alle Dateien und Ressourcen als Module, erstellt Abhängigkeitsgrafiken und generiert eine oder mehrere Bündel für die Webbereitstellung.
• Übersicht über Kernkonzepte: Einstellungen für die Eingabe, Ausgabe, Lader, Plugins und Modus in verschiedenen Umgebungen (Entwicklung, Produktion) verwenden Webpack effektiv.
• Webpack 5 -Verbesserungen: Edition 5 führt Funktionen wie persistentes Cache, verbessertes Baumschütteln und Löschen von automatischen Knoten ein, um die Leistung zu verbessern und die Bündelgröße zu reduzieren.
• Anfänger von WebPack: WebPack-Projekt starten Sie, indem Sie grundlegende Konfigurationsdateien einstellen, die Standardeinstellungen verstehen und Plug-Ins wie html-webpack-plugin verwenden, um die dynamische HTML-Erzeugung durchzuführen.
• Erweiterte Verwendung: Lernen Sie, style-loader und css-loader zu verwenden, um CSS zu verarbeiten, integrierte Module zum Ersetzen von alten Ladern zum Verwalten von Ressourcen und verwenden Optimieren Sie den Entwicklungsprozess.
• Best Practices für Produktionsumgebungen: Verwenden Sie die Funktionen von Webpack, um moderne JavaScript zu transformieren, Stile und Ressourcen zu verwalten und die Entwicklung mithilfe von Tools wie webpack-dev-server und Optimierungen für die Produktionsversion zu beschleunigen.

Was ist Webpack?

Der Kern von Webpack ist ein statischer Modulpacker. In einem bestimmten Projekt behandelt WebPack alle Dateien und Ressourcen als Module und stützt sich auf ein Abhängigkeitsgraphen. Dieses Abhängigkeitsdiagramm beschreibt, wie Module durch Referenzen (require und import Anweisungen) zwischen den Dateien miteinander zugeordnet werden. Webpack iteriert statisch alle Module, um das Diagramm zu erstellen, und generiert es, um ein einzelnes Bundle (oder mehrere Bündel) zu generieren - eine JavaScript -Datei, die Code aus allen Modulen enthält und in der richtigen Reihenfolge kombiniert wird. "Statisch" bedeutet, dass WebPack seine Abhängigkeitsgrafik nicht ausführt, sondern den Quellcode nicht ausführt, sondern die Module und ihre Abhängigkeiten zu einem Bündel kombiniert. Sie können es dann in Ihre HTML -Datei aufnehmen.

Webpack Hauptkonzepte:

Bevor wir zutiefst üben, müssen wir einige der Hauptkonzepte von Webpack klar verstehen:

• Eintrag: Einstiegspunkt ist das Modul -Webpack, mit dem er mit dem Erstellen seines internen Abhängigkeitsdiagramms beginnt. Von dort bestimmt es andere Module und Bibliotheken (direkt und indirekt), von denen der Einstiegspunkt abhängt und sie in die Grafik enthält, bis keine verbleibenden Abhängigkeiten vorhanden sind. Standardmäßig wird die Eigenschaft entry auf ./src/index.js gesetzt, aber wir können in der Webpack -Konfigurationsdatei verschiedene Module (oder sogar mehrere Module) angeben.
• Ausgabe: output Attribut zeigt an, wo das Webpack das Bundle ausgibt und den Namen für die Datei verwendet werden. Die Standardwerte für diese Eigenschaft sind ./dist/main.js des Hauptbündels und ./dist für andere generierte Dateien (wie z. B. Bilder). Natürlich können wir nach Bedarf unterschiedliche Werte in der Konfiguration angeben.
• lader: standardmäßig versteht WebPack nur JavaScript- und JSON -Dateien. Um andere Arten von Dateien zu verarbeiten und in gültige Module umzuwandeln, verwendet WebPack einen Loader. Der Loader konvertiert den Quellcode von Nicht-JavaScript-Modulen, sodass wir diese Dateien vorverarbeiten können, bevor wir sie zum Abhängigkeitsdiagramm hinzufügen. Beispielsweise kann ein Loader Dateien von Coffeescript -Sprache in JavaScript umwandeln oder Inline -Bilder in Daten -URLs konvertieren. Mit dem Loader können wir sogar CSS -Dateien direkt aus dem JavaScript -Modul importieren.
• Plugins: Plugins werden für andere Aufgaben verwendet, die der Lader nicht ausführen kann. Sie bieten uns eine breite Palette von Lösungen für das Ressourcenmanagement, die Minimierung und Optimierung von Bündeln und vieles mehr.
• Modus: Wenn wir eine Anwendung entwickeln, verwenden wir normalerweise zwei Arten von Quellcode - eine für die Entwicklung der Entwicklung und einen für die Produktionsversionsbildung. Mit WebPack können wir die Version festlegen, die generiert werden soll, indem der Parameter mode auf development, production oder none geändert wird. Auf diese Weise kann WebPack integrierte Optimierungen verwenden, die jeder Umgebung entsprechen. Der Standardwert ist production. none Modus bedeutet, dass keine Standardoptimierungsoptionen verwendet werden.

Wie funktioniert Webpack:

Auch ein einfaches Projekt enthält HTML-, CSS- und JavaScript -Dateien. Darüber hinaus kann es auch Ressourcen wie Schriftarten, Bilder usw. enthalten. Ein typischer Webpack -Workflow umfasst daher das Einrichten index.html Dateien mit geeigneten CSS- und JS -Links und erforderlichen Ressourcen. Wenn Sie viele voneinander abhängige CSS- und JS -Module haben, müssen Sie sie optimieren und ordnungsgemäß zu einer Einheit kombinieren, die für die Produktion bereit ist.

Um all dies zu tun, basiert WebPack auf die Konfiguration. Beginnend mit Version 4 und später bietet WebPack angemessene Standardwerte außerhalb des Feldes, sodass keine Konfigurationsdateien erforderlich sind. Für jedes nicht einfache Projekt müssen Sie jedoch eine spezielle webpack.config.js -Datei bereitstellen, in der beschrieben wird, wie Dateien und Ressourcen konvertiert werden und welche Art von Ausgabe generiert werden soll. Diese Datei kann schnell riesig werden, was es schwierig macht zu verstehen, wie Webpack funktioniert, es sei denn, Sie verstehen die Hauptkonzepte, die dahinter funktionieren.

Basierend auf der bereitgestellten Konfiguration startet WebPack am Einstiegspunkt und analysiert jedes Modul, auf das es beim Erstellen des Abhängigkeitsdiagramms begegnet ist. Wenn das Modul Abhängigkeiten enthält, wird dieser Vorgang für jede Abhängigkeit rekursiv durchgeführt, bis der Traversal abgeschlossen ist. Webpack bündelt dann die Module aller Projekte in eine kleine Anzahl von Bündeln (normalerweise nur eine), damit der Browser geladen werden kann.

Neue Funktionen von Webpack 5:

Webpack 5 wurde im Oktober 2020 veröffentlicht. Die Ankündigung ist lang und untersucht alle Änderungen an WebPack. Es ist unmöglich, alle Änderungen zu erwähnen, und es ist auch für solche Anfänger -Führer wie diese nicht erforderlich. Stattdessen werde ich versuchen, einige allgemeine Punkte aufzulisten:

• Verwenden Sie den anhaltenden Cache, um die Build -Leistung zu verbessern. Entwickler können nun Dateisystem-basierte Caching aktivieren, was die Entwicklung beschleunigt und baut.
• langfristiges Caching wurde ebenfalls verbessert. In WebPack 5 verursachen Änderungen an Code (Kommentare, Variablennamen), die die minimierte Bundle -Version nicht beeinflussen, keine Cache -Ungültigheit. Darüber hinaus werden neue Algorithmen hinzugefügt, die Modulen und Blöcken kurze numerische IDs auf deterministische Weise und kurze Namen dem Export zuweisen. In WebPack 5 sind sie standardmäßig im Produktionsmodus aktiviert.
• Bündelgröße wurde aufgrund eines besseren Baumschüttelns und der Codeerzeugung verbessert. Dank der neuen verschachtelten Tree Shaking -Funktion kann WebPack jetzt den Zugriff auf Export -verschachtelte Eigenschaften verfolgen. Mit CommonJS -Baumschütteln können wir nicht verwendete CommonJS -Exporte beseitigen.
• Die minimal unterstützte Node.js -Version wurde von 6 auf 10.13.0 (LTS) erhöht.
• Die Codebasis wurde gereinigt. Alle Elemente, die in Webpack 4 als veraltet markiert sind, entfernt.
• Automatische Knoten entfernen.js Polyfills. Frühere Versionen von Webpack enthalten Polyfills für native Node.js -Bibliotheken wie crypto. In vielen Fällen sind sie unnötig und erhöhen die Bündelgröße erheblich. Aus diesem Grund stoppt Webpack 5 diese Kernmodule automatisch und konzentriert sich auf Front-End-kompatible Module.
• Als Verbesserung der Entwicklung ermöglicht WebPack 5 die Ziellisten und die Unterstützung von Zielversionen. Es bietet eine automatische Bestimmung des Zielwegs. Darüber hinaus bietet es eine automatische, eindeutige Benennung, die Konflikte zwischen mehreren Webpack -Laufzeiten verhindert, die dieselbe globale Variable für die Blockbelastung verwenden.
Der Befehl
• webpack-dev-server lautet jetzt webpack serve.
• führt das Ressourcenmodul vor, das die Verwendung von file-loader, raw-loader und url-loader ersetzt.

Anfänger:

Jetzt haben wir eine solide theoretische Grundlage, lassen Sie es uns in der Praxis erkennen.

Erstens werden wir ein neues Verzeichnis erstellen und darauf wechseln. Dann werden wir ein neues Projekt initialisieren:

<code class="language-bash">mkdir learn-webpack
cd learn-webpack
npm init -y</code>

Als nächstes müssen wir Webpack und Webpack CLI lokal installieren (Befehlszeilenschnittstelle):

<code class="language-bash">npm install webpack webpack-cli --save-dev</code>

Dann erstellen wir ein src Verzeichnis und geben eine index.js -Datei hinein, damit sie console.log("Hello, Webpack!"); enthält. Jetzt können wir die Aufgabe dev ausführen, um WebPack im Entwicklungsmodus zu starten:

<code class="language-bash">npm run dev</code>

Wie bereits erwähnt, legt WebPack den Standardeinstiegspunkt auf ./src/index.js fest und legt die Standardausgabe auf ./dist/main.js fest. Wenn wir also die Aufgabe dev ausführen, erhalten Sie den Quellcode der index.js -Datei und den endgültigen Code in die main.js -Datei.

Um zu überprüfen, ob wir die richtige Ausgabe erhalten, müssen wir die Ergebnisse im Browser anzeigen. Lassen Sie uns dazu eine dist -Datei im Verzeichnis index.html erstellen:

<code class="language-html"><!DOCTYPE html>

  
    <meta charset="utf-8">
    <title>Getting Started With Webpack</title>
  
  
    
  
</code>

Wenn wir die Datei in unserem Browser öffnen, sollten wir die "Hallo, Webpack!"

(Der folgende Inhalt wird aufgrund von Platzbeschränkungen kurz zusammengefasst, und die Kernschritte und Schlüsselcode -Snippets werden beibehalten. Bitte beachten Sie den Originaltext für das vollständige Tutorial.)

Verwenden Sie HTML-Webpack-Plugin: Installieren und konfigurieren Sie das html-webpack-plugin -Plosing-In, um index.html Dateien automatisch zu generieren und zu aktualisieren, um eine manuelle Änderung zu vermeiden.

Benutzerdefinierte Eingabe und Ausgabe: Ändern Sie webpack.config.js, passen Sie das Verzeichnis der Eintragsdatei und das Ausgabeverzeichnis und den Dateinamen an.

Konvertieren Sie das moderne JavaScript in ES5: babel-loader, konfigurieren Sie webpack.config.js, konvertieren Sie den ES6 -Code in ES5 -kompatiblen Code.

Verarbeitungsstile: installieren css-loader und style-loader, konfigurieren Sie in webpack.config.js die CSS -Datei auf die Seite.

Ressourcenverwaltung: Verwenden Sie das integrierte asset/resource -Modul in WebPack 5, um Ressourcen wie Bilder zu verarbeiten.

Verwenden Sie Webpack-Dev-Server, um die Entwicklung zu beschleunigen: Installieren und Konfigurieren von webpack-dev-server, um das Nachladen von Echtzeit zu erreichen.

Reinigen Sie die Ausgabe: Verwenden Sie das Ausgangsverzeichnis clean-webpack-plugin.

Schlussfolgerung:

Dieses Tutorial führt nur die Kernkonzepte von WebPack vor, die auch viele andere Funktionen, Plug-Ins und verschiedene Technologien bieten. Es wird empfohlen, dass Sie sich auf offizielle Dokumente und andere Lernressourcen beziehen, um weiter zu studieren.

Webpack FAQ (abgekürzte Version):

• Der Unterschied zwischen Webpack und anderen Modulpackern? WebPack verfügt über ein leistungsstarkes Plug-in-System, unterstützt mehrere Dateitypen und verfügt über Code-Segmentierungsfunktionen.
• Wie konfigurieren Sie WebPack für mehrere Umgebungen? Erstellen Sie verschiedene Konfigurationsdateien und verschmelzen Sie Konfigurationen mit webpack-merge.
• Wie handelt es sich bei Webpack CSS? Verwenden Sie style-loader und css-loader.
• Was ist der HOT -Modulersatz (HMR) in WebPack? Ermöglicht die Aktualisierung von Modulen zur Laufzeit, ohne die Seite vollständig zu aktualisieren.
• Wie optimieren Sie die Konstruktion der Webpack -Produktionsversion? Codekomprimierung, Baumschütteln, Codesegmentierung usw.
• Wie benutze ich WebPack mit Babel? installieren babel-loader und konfigurieren.
• Wie verwenden Sie WebPack mit TypeScript? installieren ts-loader oder awesome-typescript-loader.
• Wie verwendet ich Webpack, um Bilder zu verarbeiten? Verwenden Sie file-loader oder url-loader (WebPack 5 verwendet Vermögensmodule).
• Wie benutze ich WebPack mit React? Verwenden Sie babel-loader, um JSX zu verarbeiten, Sie können react-hot-loader verwenden.
• Wie debuggiere ich die Webpack -Konfiguration? Verwenden Sie die Optionen debug und devtool, um Fehlermeldungen und Stapelspuren anzuzeigen.

Ich hoffe, dieses abgekürzte Tutorial hilft Ihnen dabei, schnell mit Webpack zu beginnen. Weitere Informationen finden Sie im Originaltext.

Das obige ist der detaillierte Inhalt vonEin Anfängerleitfaden für Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!