Webpack Basics – Teil 1: Einstieg

Im vergangenen Jahr hat sich Webpack quasi als Standard-Build-Tool für Webanwendungen etabliert. Trotzdem haben viele Entwickler Probleme mit der Konfiguration von Webpack , was ich mit dieser Serie ändern möchte.

Webpack existiert momentan in Version 3 und erfreut sich einer aktiven Community und zahlreicher Entwickler. Tools wie create-react-app oder die vue-cli setzen auf Webpack und dementsprechend viele Tutorials lassen sich im Netz finden. Aber warum haben viele Entwickler Probleme mit Webpack? Die erste Version von Webpack hatte eine eher komplizierte Doku und im Netz ließen sich vor allem komplexe Beispiele finden. Version 2 wurde komplett überarbeitet. Vor allem die Dokumentation ist erheblich besser geworden.

Was ist Webpack?

Bei Webpack handelt es sich um einen “static module bundler” für JavaScript-Anwendungen. Die Idee dahinter ist, einen Dependency-Graphen aufzubauen, der alle JavaScript-Module der Anwendung enthält und diese in ein (oder mehrere) Bundle packt. Bevor wir uns nun mit Webpack beschäftigen, sollten wir uns hier zwei Dinge genauer ansehen: JavaScript-Module und Bundles.

Was sind JavaScript-Module?

JavaScript-Module ermöglichen es, Code zu gruppieren, so wie wir es auch aus anderen Programmiersprachen kennen. Wer sich hier für Details interessiert, der kann sich diesen Artikel ansehen. Da wir uns in diesem Beitrag auf Webpack konzentrieren, nehmen wir ein einfaches Beispiel:

// add.js
export const add = (a, b) => a+b;

In der Datei add.js definieren wir eine Funktion add, die zwei Zahlen addiert. Diese Funktionen exportieren wir. Somit ist add.js unser Modul.

// index.js
import {add} from ‘./add.js’;

console.log(add(1,2));

Unser Modul verwenden wir dann in der Datei index.js, welche die Funktion add aus dem Modul importiert und verwendet.

Nun können wir mit diesen Dateien in unserem Browser noch nicht viel anfangen. Wir brauchen hier einen Module Bundler wie Webpack, um aus dem Code ein Bundle zu machen.

Was ist ein Bundle?

Ein Bundle ist quasi der zusammengefasste JavaScript-Code. Wir geben Webpack als Eingabe unsere Datei index.js, Webpack lädt unsere vollständige Anwendung und erstellt dann – im einfachen Fall – eine JavaScript-Datei, die unseren vollständigen Code enthält und so auch im Browser verwendet werden kann.

Mit einem aktuellen node.js und npm können wir unser Bundle nun auch schon erstellen:

npx webpack index.js dist/bundle.js

npx gehört zu npm und erspart uns hier, Webpack manuell zu installieren, was ganz nützlich ist, wenn man mal eben etwas ausprobieren möchte. In späteren Beispielen installieren wir Webpack dann normal über npm.

Das Kommando webpack benötigt zwei Eingabeparameter: den Einstiegspunkt (hier index.js) und den Pfad, an dem Webpack das Bundle dann erstellen soll (hier dist/bundle.js). Nach ein paar Sekunden erstellt Webpack dann auch schon unser Bundle.

Diese Datei können wir nun in eine HTML-Datei einbinden und uns das Ergebnis ansehen. Das Ganze funktioniert hier so einfach, da Webpack auf “convention over configuration” setzt und von Hause aus schon sehr gut mit JavaScript umgehen kann. Wir benötigen normalerweise erst eine eigene Konfiguration, wenn wir moderne JavaScript-Features nutzen möchten oder spezielle Anforderungen an den Input oder Output haben (z.B. Umgang mit .jsx-Dateien, Laden von Stylesheets).

Im nächsten Teil sehen wir uns dann die Konzepte hinter Webpack etwas genauer an, installieren Bibliotheken und erstellen eine Webpack-Konfiguration.