Erfahren Sie mehr über das Modulpaketierungstool Webpack

1. Was ist Webpack?

1. Offizielle Erklärung

Im Wesentlichen ist Webpack ein statisches modulares Verpackungstool für aktuelle JavaScript-Anwendungen. (Dieser Satz kann aus zwei Punkten zusammengefasst werden: Module und Verpackung )

Lassen Sie uns über die Konzepte von Modulen und Verpackungen sprechen!

2. Front-End-Modularisierung

• Einige Lösungen für die Front-End-Modularisierung: AMD, CMD, CommonJS, ES6 (Browser können sie nicht erkennen , aber Webpack kann ihre zugrunde liegende Unterstützung sein, bevor die modulare Entwicklung durchgeführt werden kann)
• Vor ES6 , wenn Sie modularisieren möchten
Die Entwicklung erfordert die Hilfe anderer Tools
• ,
• damit wir die modulare Entwicklung durchführen können.
• Nach Abschluss des Projekts müssen wir uns auch mit verschiedenen Abhängigkeiten zwischen Modulen befassen und diese integrieren und verpacken
• Kerne besteht darin, dass es uns die Durchführung modularer Entwicklung ermöglicht und uns hilft, mit Abhängigkeiten zwischen Modulen umzugehen.
• Nicht nur JavaScript- Dateien, sondern auch unsere CSS- , Bilder- , JSON-Dateien usw. können als Module im Webpack verwendet werden.

3. Wie ist Verpackung zu verstehen?

• Webpack kann uns dabei helfen, verschiedene komplexe Beziehungen zwischen Modulen zu modularisieren und zu bewältigen. Das Konzept der Verpackung ist leicht zu verstehen.
• Es dient zum Packen und Zusammenführen verschiedener Ressourcenmodule im Webpack in mehrere Pakete (Bundle).
• Während des Packvorgangs können auch Ressourcen verarbeitet werden , z. B. das Komprimieren von Bildern, das Konvertieren von SCSS in CSS und das Konvertieren der ES6-Syntax in ES5 zu JavaScript und anderen Operationen.
• Zu den Verpackungstools gehört Grunt/Gulp.

Vergleich zwischen Webpack und Grunt/Gulp

• ist Task.
  1. Sie können eine Reihe von Aufgaben konfigurieren und die von den Aufgaben zu verarbeitenden Transaktionen definieren (z. B. ES6, TS-Konvertierung, Bildkomprimierung, SCSS-zu-CSS-Konvertierung).
  2. Lassen Sie dann grunt/gulp diese Aufgaben nacheinander ausführen und automatisieren Sie den gesamten Prozess,

• um eine Schluckaufgabe anzuzeigen.
  1. Die folgende Aufgabe besteht darin, alle js-Dateien unter src in die ES5-Syntax zu konvertieren.
  2. Und schließlich in den dist-Ordner ausgeben.
  

• Wann sollte man Grunzen/Schlucken verwenden?
  1. Die Abhängigkeiten der Projektmodule sind sehr einfach und das Konzept der Modularisierung wird nicht einmal verwendet.
  2. Verwenden Sie einfach Grunt/Gulp zum einfachen Zusammenführen und Komprimieren.
  3. Wenn das gesamte Projekt modulares Management verwendet und die gegenseitige Abhängigkeit sehr stark ist, können wir Webpack verwenden.

• Was ist der Unterschied zwischen Grunzen/Schlucken und Webpack?
  1. grunt/gulp legt mehr Wert auf die Automatisierung von Front-End-Prozessen, und Modularisierung ist nicht sein Kern.
  2. Webpack legt mehr Wert auf modulares Entwicklungsmanagement, und Funktionen wie Dateikomprimierung, Zusammenführung und Vorverarbeitung sind seine enthaltenen Funktionen.

2. Die Installation von Webpack

( wepack muss für den normalen Betrieb auf die Knotenumgebung angewiesen sein, und die Knotenumgebung muss es sein Für die normale Ausführung ist das npm-Tool erforderlich, um verschiedene abhängige Pakete im Knoten zu verwalten .

• Um Webpack zu installieren, müssen Sie daher zuerst Node.js installieren. Node.js wird mit dem Paketverwaltungstool npm geliefert,
• um Webpack global zu installieren (npm install webpack@). 3.6.0 -g) und
• um webpck lokal zu installieren (npm install [email protected] --save-dev) –save-dev ist eine Entwicklungsabhängigkeit und muss nach dem Packen des Projekts nicht verwendet werden.

3. Webpack-Konfiguration

1. Datei- und Ordneranalyse

• dist-Ordner: Wird zum Speichern von später gepackten Dateien verwendet.
• src-Ordner: Wird zum Speichern der von uns geschriebenen Quelldateien verwendet
  main.js : Die Eintragsdatei des Projekts.
  mathUtils.js : Definiert einige mathematische Werkzeugfunktionen, die an anderer Stelle referenziert und verwendet werden können.
  index.html : Der Browser öffnet den angezeigten Homepage-HTML-Code (hier wird auf den Inhalt der endgültigen gepackten Datei in src verwiesen, d. h. auf den dist-Ordner ).
  package.json : generiert durch npm init, eine vom npm-Paket verwaltete Datei.

Das Folgende ist der Code in der Datei mathUtils.js und der Datei main.js : (CommonJS-Modularisierungsspezifikation, CommonJS ist der Standard der Modularisierung, NodeJS ist die Implementierung von CommodJS (Modularisierung))

2. Befehl

webpack ./src/main.js ./dist/bundle.js (packen Sie die Datei main.js in eine Datei bundle.js)

Beschreibung: Auf die gleiche Weise können Sie auch die modulare ES6-Spezifikation verwenden

3. Erstellen Sie eine webpack.config.js-Datei, um den Verpackungsbefehl zu vereinfachen

(ordnen Sie den Verpackungsbefehl dem Verpackungseinstieg und -ausgang zu .

Der Code in dieser Datei:

Eintrag: Für die gepackte Eintragsausgabe

: Wir müssen den Pfad in der gepackten Exit-

• Ausgabe dynamisch abrufen,
• damit wir die Node.js-Syntax verwenden können, um ein Modul zu importieren. Dieses Modul ist die Datei in den Anführungszeichen von path (const path = require ('Pfad') Muss im Knotenpaket gefunden werden.)
• Verwenden Sie node.js über den Befehl npm init (Initialisierung),
• um die Datei package.json zu generieren (diese Datei beschreibt die Informationen des aktuellen Projekts). Lizenz: „ISC“ (Open Source für das Projekt), das Folgende ist package.json Codebeschreibung

: Wenn Sie Node verwenden möchten, müssen Sie sich auf die Datei package.json verlassen

Nach dem Ausführen von npm install [email protected] --save-dev werden die Abhängigkeiten wie folgt hinzugefügt

4. Zuordnen von Webpack-Befehlen zu npm run

Zusätzlich zur Zuordnung von Webpack zum Eingang und Ausgang können Sie für einige Vorgänge auch Webpack -Befehle zu npm run zuordnen (muss im Skript-Tag **"script"** im Paket geändert werden). json). .

4. Die Verwendung von Loader

1. Was ist Loader?

• Ein sehr zentrales Konzept im Webpack.

Lassen Sie uns nun darüber nachdenken, wofür Webpack verwendet wird.

• Wir verwenden hauptsächlich Webpack, um JS-Code zu verarbeiten, und Webpack verarbeitet automatisch die mit JS verbundenen Abhängigkeiten
• . Während der Entwicklung wird jedoch nicht nur der grundlegende JS-Code verarbeitet, sondern es müssen auch CSS, Bilder und etwas erweiterter Code geladen werden Konvertieren Sie ES6 in ES5, konvertieren Sie TypeScript in ES5-Code, konvertieren Sie SCSS und weniger in CSS, konvertieren Sie .jsx-, .vue-Dateien in JS-Dateien usw.
Für die Funktionen von Webpack selbst werden diese Transformationen
• derzeit nicht
• unterstützt.
Erweitern Sie einfach den entsprechenden Loader auf Webpack

2. Loader-Nutzungsprozess

1)

Vorbereitungsarbeiten für die CSS-Dateiverarbeitung:

1. Erstellen Sie im src-Verzeichnis eine CSS-Datei , erstellen Sie darin eine normal.css-Datei.

2. Organisieren Sie die Verzeichnisstruktur der Datei neu und legen Sie die verstreuten js-Dateien in einem js-Ordner ab

. 3. Der Code in normal.css ist sehr einfach, dh setzen Sie den Text auf Rot

4. Der Stil in normal.css wird jedoch zu diesem Zeitpunkt nicht wirksam, da er nicht referenziert ist und Webpack ihn nicht finden kann, da wir nur einen Eintrag haben und Webpack ab dem Eintrag nach anderen abhängigen Dateien sucht.

5. Zu diesem Zeitpunkt müssen wir in main.js, der Eintragsdatei, darauf verweisen

Danach müssen wir den entsprechenden Loader zur Verwendung importieren!

• Schritt 1 : Installieren Sie den Loader, den Sie verwenden müssen, über npm
  (npm install --save-dev css-loader) (npm install --save-dev style-loader)
  Auf der offiziellen Website von Webpack finden Sie die folgende Methode zur Verwendung des Loaders für Stile:
  
  

• Schritt 2 : Erstellen Sie Konfigurationsanweisungen unter dem Schlüsselwort „modules“ in webpack.config.js

: Der CSS-Loader ist nur für das Laden von CSS-Dateien verantwortlich und nicht für das Einbetten bestimmter CSS-Stile in Dokumente.

Zu diesem Zeitpunkt benötigen wir auch einen Stil . Loader helfen uns bei der Verarbeitung

Hinweis: Der Style-Loader muss vor dem CSS-Loader platziert werden.

2) Weniger Dateiverarbeitungsschritt

• 1 : Installieren Sie den entsprechenden Loader (Hinweis: Hier wird auch weniger installiert, da Webpack weniger zum Kompilieren der weniger Datei verwendet). Befehl: npm install --save-dev less-loader less

• Schritt 2 : Ändern Sie die entsprechende Konfigurationsdatei (in webpack.config.js) und fügen Sie eine Regeloption für die Verarbeitung von .less-Dateien hinzu. wie folgt:

3) Bilddateiverarbeitung

• Schritt 1 : Fügen Sie dem Projekt zwei Bilder hinzu (eines ist kleiner als 8 KB, das andere ist größer als 8 KB).

• Schritt 2 : Erwägen Sie zunächst, das Bild wie folgt im CSS-Stil zu referenzieren

  

• Schritt 3 : Ändern Sie die entsprechende Konfigurationsdatei (in webpack.config.js) und fügen Sie eine Regeloption für die Verarbeitung von Bilddateien hinzu. wie folgt:

  

• Schritt 4 : Nach dem Packen wurde ein Fehler gefunden, da Bilder, die größer als 8 KB sind, über den File-Loader verarbeitet werden, in unserem Projekt jedoch kein File-Loader vorhanden ist. (Sie müssen den Dateilader installieren, Befehl npm install --save-dev file-loader. Nach der Installation und Verpackung werden Sie feststellen, dass sich im dist-Ordner eine zusätzliche Bilddatei befindet.)

  

Beschreibung:

• Es wurde festgestellt, dass das Webpack automatisch einen sehr langen Namen für uns

  1 generiert hat. Dies ist ein 32-Bit-Hash-Wert, um eine Namensduplizierung zu verhindern.
  2. In der tatsächlichen Entwicklung können jedoch bestimmte Anforderungen an den Namen des gepackten Bildes bestehen

• . Daher können wir in den Optionen die folgenden Optionen hinzufügen:

  1. img: Der Ordner, in den die Datei gepackt werden soll.
  2. Name: Holen Sie sich den Originalnamen des Bildes und platzieren Sie ihn an dieser Stelle
  3. Hash8: Um Bildnamenskonflikte zu vermeiden, wird weiterhin Hash verwendet, es werden jedoch nur 8 Bits beibehalten.
  4. ext: Verwenden Sie die ursprüngliche Erweiterung des Bildes wie folgt:
  

• Sie müssen später auch den vom Bild verwendeten Pfad konfigurieren und ändern

  . 1. Standardmäßig gibt Webpack den generierten Pfad an den Benutzer zurück.
  2. Das gesamte Programm ist jedoch im Ordner dist gepackt, daher müssen Sie hier einen weiteren dist/ zum Pfad hinzufügen.
  wie folgt:
  

Zusammenfassend sieht die Bilddatei nach dem Packen so aus

4), ES6 bis ES5 Babel

5. Konfigurieren Sie Vue im Webpack.

• Schritt 1: Terminalausführungsbefehl (npm install --save vue).

• Schritt 2: Importieren Sie Vue in main.js (importieren Sie Vue aus „vue“) wie folgt

• Schritt 3: Hängen Sie p wie folgt an die Vue-Instanz in index.html

• Schritt 4: Nach dem Packen wird ein Fehler gefunden. Wir müssen angeben, dass es sich bei dem von uns verwendeten Vue um die Laufzeit-Compiler- Version handelt.

Spezifische Vorgänge: Sie müssen „resolve“ zum Webpack hinzufügen und einen Alias ​​( alias ) verwenden, wie folgt:

6. Vue-Nutzung im Webpack

Schritt 1: Hängen Sie p an die Vue-Instanz in index.html

Schritt 2: Importieren Sie die APP-Komponente in die Datei main.js , registrieren Sie die APP in der Vue-Instanz und verwenden Sie die Komponenten-APP in der Vue-Vorlage ( Komponentisierung ).

Schritt 3: Erstellen Sie die Datei APP.vue und trennen Sie die Vorlage der Vue-Seite wie folgt vom JS-Code und CSS-Code

Schritt 4: Konfigurieren Sie den entsprechenden Loader von Vue.

Ändern Sie die Konfigurationsdatei von webpack.config.js:

7. Verwendung des Plugins

1. Plugin verstehen

• Was ist ein Plugin?
  1. Plugin bedeutet Plug-In, das normalerweise zur Erweiterung einer vorhandenen Architektur verwendet wird.
  2. Plug-Ins in Webpack sind verschiedene Erweiterungen der vorhandenen Funktionen von Webpack, wie z. B. Verpackungsoptimierung, Dateikomprimierung usw.
• Der Unterschied zwischen Loader und Plugin
  1. Loader wird hauptsächlich zum Konvertieren bestimmter Modultypen verwendet. Es handelt sich um einen Konverter
  2. Plugin ist ein Plug-in, das eine Erweiterung des Webpacks selbst und
• den Verwendungsprozess eines Extender-Plugins darstellt.
  1. Schritt 1: Die Installation über npm erfordert die Verwendung von Plugins (einige bereits im Webpack integrierte Plugins müssen nicht installiert werden).
  2. Schritt 2: Konfigurieren Sie das Plug-in in Plugins in webpack.config.js

2. Webpack – Copyright-Informationen hinzufügen Plugin-Nutzung

3. HTML-Plugin packen

4. js-Komprimierungs-Plugin

8. Erstellen Sie einen lokalen Server

• . Dieser lokale Server basiert auf node.js und kann intern das erreichen, was wir wollen, indem er dem Browser ermöglicht, die geänderten Ergebnisse automatisch zu aktualisieren .

• Es handelt sich jedoch um ein separates Modul, bevor Sie es in webpck verwenden können. Befehl: (npm install --save-dev [email protected])

• devserver ist auch eine Option in webpack kann wie folgt eingestellt werden:
  1. contentBase: Welcher Ordner stellt lokale Dienste bereit? Der Standardwert ist der Stammordner. Wir müssen hier ./dist ausfüllen.
  2. Port: Portnummer
  3. Inline: Seitenaktualisierung in Echtzeit
  4. HistoryApiFallback: Auf der SPA-Seite wird die Konfiguration der Datei webpack.config.js im Verlaufsmodus,

• die auf HTML5 basiert, wie folgt geändert:
  

• Der Parameter –open bedeutet, dass der Browser direkt geöffnet wird

Darüber hinaus

möchten wir im Folgenden die Webpack-Konfigurationsdateien trennen: das heißt, die Dinge, die für die Entwicklung benötigt werden, und die Dinge, die für die Veröffentlichung ( Kompilierung ) verwendet werden, trennen. wie folgt:

9. Vue CLI

1. Was bedeutet CLI?

• Es handelt sich um eine Befehlszeilenschnittstelle, die allgemein als Scaffolding bezeichnet wird und
• ein offiziell veröffentlichtes vue.js-Projektgerüst ist,
• mit dem Sie schnell eine Vue -Entwicklungsumgebung und die entsprechende Webpack-Konfiguration erstellen

können . Voraussetzungen für die Verwendung von Vue CLI – Node (Node muss installiert sein)

Um Node verwenden zu können, muss jedoch npm beteiligt sein

.

• Der vollständige Name von NPM ist Node Package Manager
• , ein NodeJS-Paketverwaltungs- und -verteilungstool. Es hat sich zu einem inoffiziellen Standard für die Veröffentlichung von Node-Modulen (Paketen) entwickelt
• und wird häufig zur Installation einiger abhängiger Pakete während des Entwicklungsprozesses verwendet.

3. Verwenden Sie Vue CLI, um

• das Vue-Gerüst

npm install -g @vue/cli

• eine Initialisierung

nicht möglich

• das Vue CLI2-Projekt

vue init webpack my -project