Webpack Basics – Teil 2: Konzepte und Installation

Im ersten Teil der Serie haben wir uns Module und Bundles angesehen und mit Webpack unser erstes Bundle erstellt. Bevor wir uns nun näher mit der Konfiguration beschäftigen, sehen wir uns ein paar Konzepte an, die zu Webpack gehören: Entry, Output, Loaders und Plugins.

Entry

Über den Entry legt man den Einstiegspunkt für die Bundle fest, die man erstellen möchte. Hier reicht sehr häufig schon ein einziger Einstiegspunkt. Diese Datei importiert dann alle anderen Dateien, so wie im ersten Beitrag beschrieben.

Output

Der Output definiert, was mit den erzeugten Bundles passieren soll. Also wie die JavaScript-Datei heißen soll, in der das Bundle gespeichert wird, und wo diese liegt.

Loaders

Hier passiert quasi die Magie von Webpack, denn in den Loaders können wir definieren, ob und wie Webpack mit Dateien umgeht. So kann man mit dem babel-loader modernes JavaScript (ES6+) in ES5 umwandeln oder mit dem ts-loader den verwendeten TypeScript Code in JavaScript umwandeln.

Bei komplexeren Anwendungen kann man diese aber auch nutzen, um Sass oder Less Stylesheets zu verarbeiten und Bilder zu optimieren.

Plugins

Während Loader sich auf die Bundles und den Code in den Modulen beschränken, sind Plugins dazu in der Lage, alles rund um den Build zu steuern. Vom Aufräumtask vor dem Build über die Erstellung der HTML-Dateien für unsere Anwendung bis zur Minifizierung unseres Codes gibt es unfassbar viele Möglichkeiten.

Installation und erste Konfiguration

Wie bei jedem Tool können wir auch mit Webpack sehr ungewöhnliche Dinge anstellen. In dieser Serie bleiben wir aber zunächst bei den Grundlagen.

Projekt anlegen

Um nun unser Beispiel aus dem letzen Beitrag mit Hilfe einer Webpack-Konfiguration zu bauen, müssen wir als erstes ein Projekt anlegen und dort Webpack installieren: Hierfür initialisieren wir npm zunächst in einem leeren Ordner webpack-sample (mehr zu npm habe ich in diesem Beitrag geschrieben ).

mkdir webpack-sample
cd webpack-sample
npm init -y

Als nächstes benötigen wir einen Ordner für unseren Code. Hierfür legen wir einen Ordner lib an in den wir unseren Code aus dem ersten Beispiel kopiere. Damit wir auch etwas sehen können, änderen wir die index.js im Ordner lib etwas ab:

import { add } from "./add";
const result = add(1, 2);
// ändert den Text im Element mit der id #app in "1 + 2 = 3"
document.getElementById("app").textContent = "1 + 2 = " + result;

Als letztes erstellen wir eine Datei index.html, die ein Element mit einer Id app hat und die JavaScript-Datei, die wir erzeugen werden, einbindet. Ein Beispiel für diese habe ich auf GitHub online gestellt.

Webpack-Konfiguration

Wenn wir nun Webpack manuell ausführen (npx webpack lib/index.js dist/bundle.js) und die index.html im Browser öffnen, sehen wir den erwarteten Text. Natürlich möchten wir Webpack nicht immer manuell ausführen. Damit wir es bequem über npm starten können, installieren wir es als dev-Dependency:

npm install --dev webpack

Nun ergänzen wir in unserer package.json im scripts-Block ein neues Skript:

"scripts": {
 "build": "webpack"
},

Wenn wir nun npm run build ausführen, wird Webpack im aktuellen Ordner ausgeführt und gibt uns erstmal einen Fehler zurück, der auf die fehlende Webpack-Konfiguration hinweist. Diese findet man normalerweise in der Datei webpack.config.js, die wir auch direkt anlegen und dort entry und output definieren:

module.exports = {
 entry: "./lib/index.js",
 output: {
   filename: "./dist/bundle.js"
 }
};

Unsere Webpack-Konfiguration exportiert also ein Objekt mit den Keys entry und output. Die minimalste Konfiguration in entry ist ein String mit dem Pfad zur index.js. Unser output muss hier schon ein Objekt mit dem Key Filename sein, dem wir ebenfalls einen Pfad, diesmal zum Bundle, zuweisen.

Wenn wir nun erneut npm run build ausführen, erstellt Webpack für uns das Bundle. Und schon steht unsere erste Webpack-Konfiguration. Noch ist sie recht überschaubar, aber wir werden schon im nächsten Teil etwas mehr Funktionalität hinzufügen und uns mehr mit den Möglichkeiten, die Webpack uns bietet, beschäftigen.