Erste Schritte mit Webpack [Mit Beispielprojekt]

Webpack ist ein Modulbündler Dies erleichtert das Erstellen komplexer JavaScript-Anwendungen. Es hat sich ernsthaft durchgesetzt, seit die React-Community es als Hauptwerkzeug für den Build ausgewählt hat. Webpack ist Weder ein Paketmanager noch ein Task Runner Da es einen anderen (fortgeschritteneren) Ansatz verwendet, ist es jedoch auch sein Ziel einen dynamischen Erstellungsprozess einrichten.

Webpack arbeitet mit Vanille-JavaScript. Sie können es verwenden Bündeln Sie die statischen Assets einer Anwendung, wie Bilder, Schriftarten, Stylesheets, Skripte in eine einzige Datei sich um alle Abhängigkeiten kümmern.

Sie benötigen kein Webpack, um eine einfache App oder Website zu erstellen, z. B. eine, die nur eine JavaScript-, eine CSS-Datei und ein paar Bilder enthält. Dies kann jedoch eine Rettung für das Internet bedeuten komplexere Anwendung mit mehreren Assets und Abhängigkeiten.

Webpack vs. Task Runner vs. Browserify

Wie stapelt sich Webpack also? im Vergleich zu anderen Build-Tools wie Grunt, Gulp oder Browserify?

Grunt und Gulp sind Läufer. In ihrer Konfigurationsdatei, Sie Geben Sie die Aufgaben an, und der Task Runner führt sie aus. Das Workflow eines Task Runners sieht im Grunde so aus:

Webpack ist jedoch ein Modulbündler das analysiert das gesamte Projekt, baut einen Abhängigkeitsbaum auf, und erstellt eine gebündelte JavaScript-Datei dass es dem Browser dient.

Browserify steht Webpack näher als Taskläufer, da es auch so ist erstellt ein Abhängigkeitsdiagramm aber nur so für JavaScript-Module. Webpack geht noch einen Schritt weiter und bündelt nicht nur Quellcode sondern auch auch andere Vermögenswerte wie Bilder, Stylesheets, Schriftarten usw.

Wenn Sie mehr darüber erfahren möchten wie Webpack sich mit anderen Build-Tools vergleicht, Ich empfehle Ihnen zwei Artikel:

1. Andrew Ray's Webpack: Wann und warum? auf seinem eigenen Blog
2. Cory House Browserify vs Webpack auf freeCodeCamp (mit tollen Illustrationen)

Die beiden obigen Abbildungen stammen von der Webpack-Materialien des Pro React-Handbuchs, Eine weitere Ressource, die einen Blick wert ist.

Vier Kernkonzepte von Webpack

Webpack hat vier Hauptkonfigurationsoptionen genannt “Kernkonzepte” das Sie im Entwicklungsprozess definieren müssen:

1. Eintrag - das Startpunkt des Abhängigkeitsgraphen (eine oder mehrere JavaScript-Dateien).
2. Ausgabe - die Datei, wo Sie die Ausgabe, zu der gebündelt werden soll (eine JavaScript-Datei).
3. Lader - Transformationen auf den Vermögenswerten verwandeln sie in Webpack-Module damit sie sein können zum Abhängigkeitsgraphen hinzugefügt. Zum Beispiel, css-loader wird für den Import von CSS-Dateien verwendet.
4. Plugins - benutzerdefinierte Aktionen und Funktionen am Bundle durchgeführt. Zum Beispiel die i18n-webpack-plugin bettet die Lokalisierung in das Bundle ein.

Die Lader arbeiten pro Datei bevor die Zusammenstellung erfolgt. Plugins werden auf dem mitgelieferten Code ausgeführt, am Ende des Kompilierungsprozesses.

Installieren Sie Webpack

Zu Installieren Sie Webpack, Öffnen Sie die Befehlszeile, navigieren Sie zu Ihrem Projektordner und führen Sie den folgenden Befehl aus:

 npm init 

Wenn Sie die Konfiguration nicht selbst vornehmen möchten, können Sie npm vornehmen bevölkern die package.json Datei mit den Standardwerten mit dem folgenden Befehl:

 npm init -y 

Als nächstes installieren Sie Webpack:

 npm install webpack --save-dev 

Wenn Sie die Standardwerte verwendet haben, ist dies Ihre package.json Die Datei sollte jetzt so aussehen (die Eigenschaften können in einer anderen Reihenfolge sein):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "abhängigkeiten": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scripts ": " test ":" echo \ "Fehler: Kein Test angegeben \" && exit 1 "," Schlüsselwörter ": []," author ":" "," license ":" ISC " 

Erstellen Sie die Konfigurationsdatei

Sie müssen ein erstellen webpack.config.js Datei im Stammordner des Projekts. Diese Konfigurationsdatei hat eine zentrale Rolle, da Sie dies tun werden Definieren Sie die vier Kernkonzepte (Einstiegspunkte, Ausgabe, Loader, Plugins).

Das webpack.config.js Datei enthält ein Konfigurationsobjekt welche Eigenschaften Sie angeben müssen. In diesem Artikel werden wir die vier Eigenschaften angeben entsprechen den vier Kernkonzepten (Eintrag, Ausgabe, Modul, und Plugin), aber das config-Objekt hat auch andere Eigenschaften.

1. Erstellen Sie die Einstiegspunkte

Du kannst haben einen oder mehrere Einstiegspunkte. Sie müssen sie im definieren Eintrag Eigentum.

Fügen Sie das folgende Code-Snippet in das ein webpack.config.js Datei. Es gibt einen Einstiegspunkt an:

 module.exports = entry: "./src/script.js"; 

Um mehrere Einstiegspunkte anzugeben, können Sie verwenden entweder das Array oder die Objektsyntax.

In Ihrem Projektordner, erstelle eine neue src Mappe und ein script.js Datei darin. Das wird dein sein Einstiegspunkt. Nur zu Testzwecken Platziere eine Zeichenkette im Inneren. Ich habe folgendes verwendet (Sie können jedoch auch ein interessanteres verwenden):

 const greeting = "Hallo. Ich bin ein Webpack-Starterprojekt."; document.write (Begrüßung); 

2. Definieren Sie die Ausgabe

Du kannst haben nur eine Ausgabedatei. Webpack bündelt alle Assets in dieser Datei. Sie müssen das konfigurieren Ausgabe Eigenschaft auf folgende Weise:

 const path = required ("Pfad"); module.exports = entry: "./src/script.js", Ausgabe: Dateiname: "bundle.js", Pfad: Pfad.resolve (__ Verzeichnisname, 'dist'); 

Das Dateiname Eigenschaft definiert die Name der gebündelten Datei, während Pfad Eigentum gibt den Namen des Verzeichnisses an. Das obige Beispiel erstellt die /dist/bundle.js Datei.

Obwohl es nicht obligatorisch ist, ist es besser zu tun benutze die path.resolve () Methode wenn Sie das definieren Pfad Eigentum, wie es sorgt für genaue Modulauflösung (Der absolute Pfad der Ausgabe wird nach verschiedenen Regeln in verschiedenen Umgebungen erstellt. Die Modulauflösung löst diese Diskrepanz). Wenn du benutzt Pfad.Auflösen, du musst benötigen das Pfad Knotenmodul an der Spitze der webpack.config.js Datei.

3. Fügen Sie die Lader hinzu

Zu fügen Sie die Lader hinzu, Sie müssen das definieren Modul Eigentum. Unten fügen wir die Babel-Lader das erlaubt es dir Verwenden Sie die ECMAScript 6-Funktionen sicher in Ihren JS-Dateien:

 const path = required ("Pfad"); module.exports = entry: "./src/script.js", Ausgabe: Dateiname: "bundle.js", Pfad: Pfad.resolve (__ Verzeichnisname, 'dist'), module: rules: [test : /\.js$/, ausschließen: / (node_modules | bower_components) /, verwenden Sie: loader: "babel-loader", Optionen: Voreinstellungen: ["env"]; 

Die Konfiguration mag schwierig erscheinen, aber es wird nur kopiert Dokumentation des Babel-Laders. Die meisten Loader werden entweder mit einer Readme-Datei oder einer Dokumentation geliefert, so dass Sie (fast) immer wissen, wie Sie sie richtig konfigurieren. Und die Webpack-Dokumente haben auch eine Seite mit Erläuterungen wie konfiguriert man module.rules.

Du kannst hinzufügen beliebig viele Lader, Hier ist die vollständige Liste. Beachten Sie, dass Sie auch müssen Installieren Sie jeden Loader mit npm um sie arbeiten zu lassen. Für den Babel-Loader müssen Sie die erforderlichen Node-Pakete mit npm installieren:

 npm install --save-dev Babel-Loader Babel-Core Babel-Preset-Env Webpack 

Wenn Sie sich Ihre ansehen package.json Datei, Sie sehen das npm fügte drei Babel-bezogene Pakete zum hinzu devDependencies Eigentum, Diese sorgen für die ES6-Kompilierung.

4. Fügen Sie die Plugins hinzu

Zu fügen Sie die Plugins hinzu, Sie müssen das angeben Plugins Eigentum. Plus muss man auch benötigen die Plugins nacheinander, da es sich um externe Module handelt.

In unserem Beispiel fügen wir zwei Webpack-Plugins hinzu: das HTML Webpack-Plugin und das Laden Sie das Webpack-Plugin vor. Webpack hat eine schönes Plugin-Ökosystem, Sie können die vollständige Liste hier durchsuchen.

Um die Plugins als Node-Module zu benötigen, Erstellen Sie zwei neue Konstanten: HtmlWebpackPlugin und PreloadWebpackPlugin und benutze die benötigen() Funktion.

 const path = required ("Pfad"); const HtmlWebpackPlugin = required ("html-webpack-plugin"); const PreloadWebpackPlugin = required ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", Ausgabe: Dateiname: "bundle.js", Pfad: Pfad.resolve (__ Verzeichnisname, 'dist'), module: rules: [test : /\.js$/, ausschließen: / (node_modules | bower_components) /, verwenden Sie: loader: "babel-loader", Optionen: presets: ["env"], plugins: [neues HtmlWebpackPlugin (), neues PreloadWebpackPlugin ()]; 

Genau wie bei Ladern müssen Sie dies auch tun Installieren Sie die Webpack-Plugins mit npm. Um die beiden Plugins im Beispiel zu installieren, führen Sie die folgenden zwei Befehle in Ihrer Befehlszeile aus:

 npm install html-webpack-plugin --save-dev npm install --save-dev Preload-Webpack-Plugin 

Wenn Sie Ihre überprüfen package.json Datei jetzt, Sie sehen, dass npm fügte die zwei Plugins zum hinzu devDependencies Eigentum.

Führen Sie Webpack aus

Zu Erstellen Sie den Abhängigkeitsbaum und das Bündel ausgeben, Führen Sie den folgenden Befehl in der Befehlszeile aus:

 Webpack 

Normalerweise ist es dauert ein oder zwei Minuten für Webpack, um das Projekt zu erstellen. Wenn Sie fertig sind, wird eine ähnliche Meldung in Ihrer CLI angezeigt:

Wenn alles richtig lief, Webpack erschuf ein dist Mappe in der Wurzel Ihres Projekts und legte die beiden gebündelten Dateien (Bundle.js und index.html) im Inneren.

Github Repo

Wenn Sie das gesamte Projekt auschecken, herunterladen oder zusammenfassen möchten, werfen Sie einen Blick auf unser Github-Repo.