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:

mkdir learn-webpack
cd learn-webpack
npm init -y

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

npm install webpack webpack-cli --save-dev

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:

npm run dev

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:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Getting Started With Webpack</title>
  </head>
  <body>
    <??>
  </body>
</html>

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!