Detailliertes WebPack-Einführungs-Tutorial

Dieses Mal werde ich Ihnen eine detaillierte Einführung in das WebPack-Einführungs-Tutorial geben. Was sind die Vorsichtsmaßnahmen für den Einstieg in WebPack? Hier sind praktische Fälle.

1. Was ist Webpack

WebPack kann als Modulpaketierer betrachtet werden: Es analysiert Ihre Projektstruktur, findet JavaScript-Module und andere Erweiterungssprachen, die Browser nicht direkt ausführen können (Scss, TypeScript usw.), und verpacken Sie es in ein geeignetes Format für die Verwendung durch den Browser.

2. Warum WebPack verwenden

Viele Webseiten können heute tatsächlich als funktionsreiche Anwendungen betrachtet werden. Sie verfügen über komplexen JavaScript-Code und viele Abhängigkeitspakete. Um die Komplexität der Entwicklung zu vereinfachen, sind in der Front-End-Community viele bewährte Verfahren entstanden

a:Modularisierung ermöglicht es uns, komplexe Programme in kleine Dateien zu verfeinern;

b: Ähnlich wie TypeScript, eine auf JavaScript basierende Entwicklungssprache: Sie ermöglicht uns die Implementierung von Funktionen, die in der aktuellen Version von JavaScript nicht direkt verwendet werden können, und kann später in JavaScript-Dateien umgewandelt werden, damit der Browser sie erkennen kann

c:scss, less und andere CSS-Präprozessoren

.........

Diese Verbesserungen haben unsere Entwicklungseffizienz zwar erheblich verbessert, aber die mit ihnen entwickelten Dateien erfordern oft eine zusätzliche Verarbeitung, um vom Browser erkannt zu werden, und die manuelle Verarbeitung ist sehr antiblockierend, was die Entstehung von Tools wie WebPack ermöglicht.

3. Welche Funktionen hat WebPack im Vergleich zu Grunt und Gulp? Tatsächlich ist Webpack nicht sehr vergleichbar mit den anderen beiden. Es ist ein Tool, das den Front-End-Entwicklungsprozess optimieren kann, während WebPack eine modulare Lösung ist. Die Vorteile von Webpack ermöglichen es jedoch, Gulp/Grunt zu ersetzen. Grunzartige Werkzeuge.

Die Arbeitsweise von Grunt und Gulp ist: Geben Sie in einer

Konfigurationsdatei

die spezifischen Schritte an, um Aufgaben wie Kompilierung, Kombination, Komprimierung usw. für bestimmte Dateien auszuführen. Dieses Tool kann diese Aufgaben dann automatisch für Sie erledigen .

Die Funktionsweise von Webpack ist: Behandeln Sie Ihr Projekt als Ganzes. Über eine bestimmte Hauptdatei (z. B. index.js) findet Webpack alle abhängigen Dateien Ihres Projekts, beginnend mit dieser Datei, verwendet Loader, um sie zu verarbeiten, und schließlich Verpackt als JavaScript-Datei, die vom Browser erkannt werden kann.

Vorteile: Modularität

In den Augen von Webpack ist alles ein Modul! Dies ist sein unverzichtbarer Vorteil. Ihr JavaScript-Code, einschließlich CSS, Schriftarten, Bilder usw., kann nur über entsprechende Lader als Module verarbeitet werden.

1. CSS

Webpack bietet zwei Tools für den Umgang mit Stylesheets, CSS-Loader und Style-Loader, sie erledigen verschiedene Aufgaben, CSS-Loader ermöglicht die Verwendung von Methoden wie @import und url(...) Die Funktion von require

() und style-loader fügt alle berechneten Stile zur Seite hinzu. Die Kombination der beiden ermöglicht es Ihnen, das Stylesheet in die von Webpack gepackte JS-Datei einzubetten.

Muss separat installiert werden:

npm install --save-dev style-loader css-loader

2. CSS-Module

In den letzten Jahren hat sich JavaScript durch neue Sprachfunktionen, bessere Tools und bessere Praktiken (z. B. Modularisierung) rasant weiterentwickelt. Mithilfe von Modulen können Entwickler komplexen Code in kleine, saubere Einheiten mit klar definierten Abhängigkeiten umwandeln, und basierend auf Optimierungstools können Abhängigkeitsmanagement und Lastmanagement automatisch abgeschlossen werden

.

Im anderen Teil des Frontends ist die CSS-Entwicklung jedoch relativ langsam und die meisten Stylesheets sind immer noch riesig und voller globaler Klassennamen, was die Wartung und Änderung sehr schwierig und kompliziert macht.

Neuerdings gibt es so genannte CSS-Module Die Technologie soll das modulare Denken von JS in CSS integrieren. Durch CSS-Module gelten alle Klassennamen und Animationsnamen standardmäßig nur für das aktuelle Modul. Webpack hat von Anfang an CSS-Modularität unterstützt Nach der Konfiguration im Loader müssen Sie lediglich „Module“ an die erforderlichen Stellen übergeben und dann den CSS-Klassennamen direkt an den Komponentencode übergeben. Dies gilt nur für die aktuelle Komponente, kein Grund zur Sorge über die Probleme, die entstehen können, wenn in verschiedenen Modulen derselbe Klassenname vorhanden ist.

Auf diese Weise verunreinigen sich dieselben Klassennamen nicht gegenseitig

3. CSS-Vorkompilierung

Präprozessoren wie Sass und Less sind Erweiterungen für natives CSS, mit denen Sie Dinge wie Variablen, Verschachtelungen, Mixins usw. verwenden können. Um CSS mithilfe von Vererbung und anderen Funktionen zu schreiben, die es in CSS nicht gibt, kann der CSS-Präprozessor diese speziellen Arten von Anweisungen in CSS-Anweisungen umwandeln, die der Browser erkennen kann,

Möglicherweise kennen Sie es jetzt. Sie können es mithilfe relevanter Loader im Webpack konfigurieren. Die folgenden sind häufig verwendete CSS-Verarbeitungsloader a:less-loader

b:sass-loader

c:stylus-loader

Es gibt auch eine CSS-Verarbeitungsplattform – PostCSS, mit der Sie CSS mit mehr Funktionen verwenden können, z. B. wie Sie PostCSS verwenden, um dem CSS-Code automatisch CSS-Präfixe hinzuzufügen, die sich an verschiedene Browser anpassen.

Installieren Sie zuerst den Postcss-Loader und den Autoprefixer (Plug-in, das automatisch Präfixe hinzufügt)

npm install --save-dev postcss-loader autoprefixer

Und legen Sie es in der Webpack-Konfigurationsdatei fest. Sie müssen nur ein neues PostCSS-Schlüsselwort erstellen und die abhängigen Plug-Ins wie folgt deklarieren. Jetzt fügt das von Ihnen geschriebene CSS automatisch verschiedene Präfixe basierend auf den Daten in Can hinzu Ich benutze.

2. Webpack-Pulgins

Plugins werden zur Erweiterung der Webpack-Funktionen verwendet. Sie werden während des gesamten Build-Prozesses wirksam und führen damit verbundene Aufgaben aus.

Loader und Plugins werden oft verwechselt, aber eigentlich handelt es sich um völlig unterschiedliche Dinge. Man kann sagen, dass Loader verwendet werden, um Quelldateien (JSX, Scss, Less...) einzeln während des Paketierungs- und Erstellungsprozesses zu verarbeiten Es wirkt sich nicht direkt auf eine einzelne Datei aus, sondern wirkt sich direkt auf den gesamten Erstellungsprozess aus.

Webpack verfügt über viele integrierte Plug-Ins sowie viele Plug-Ins von Drittanbietern, die es uns ermöglichen, umfangreichere Funktionen auszuführen.

1. Wie verwende ich das Plug-in?

Um ein Plugin zu verwenden, müssen wir es über npm installieren, und dann müssen wir nur noch eine Instanz des Plugins im Schlüsselwortabschnitt „Plugins“ der Webpack-Konfiguration hinzufügen (Plugins ist ein Array). Wir haben ein Plugin hinzugefügt, das das implementiert Copyright-Erklärung. Wie zum Beispiel das HtmlWebpackPugin-Plug-in,

Die Funktion dieses Plug-Ins besteht darin, Sie bei der Generierung der endgültigen HTML5-Datei basierend auf einer einfachen Vorlage zu unterstützen. Diese Datei verweist automatisch auf Ihre gepackte JS-Datei. Bei jeder Kompilierung wird ein anderer Hashwert in den Dateinamen eingefügt.

//Installieren

npm install --save-dev html-webpack-puginIch glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter Bitte achten Sie auf andere chinesische PHP-Websites. Verwandte Artikel!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der parasitären kombinierten Vererbung von js

JS-Implementierung der Schachbrettabdeckung

Detaillierte Erläuterung der Schritte zur Verwendung von js-Prototypobjekten

Das obige ist der detaillierte Inhalt vonDetailliertes WebPack-Einführungs-Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!