Webpack 2

Webprojekte werden immer komplexer und der Aufwand diese zu entwickeln und zu warten steigt gleichzeitig erheblich an. Als Lösung bietet sich hier die Modularisierung, wie man es von NodeJS schon kennt, an. Man baut Module und verzahnt diese miteinander. Klingt gut, funktioniert im Browser leider nicht … Nicht ohne Umwege, da ‚import‘ und ‚export‘ erst mit ES6 eingeführt werden sollen.

Es gibt Implementierungen für den Browser, wie RequireJS oder Browserify, die eine solche Möglichkeit hinzufügen. RequireJS lädt die entsprechenden Module asynchron nach und Browserify bündelt die JavaScript-Dateien zu einer Einzigen zusammen. Mit diesen beiden Methoden funktioniert die Modularisierung sehr gut. Je nach Anwendungsfall kann man sich für das eine oder das andere entscheiden. Bei Snake mit Phaser habe ich Browserify in Verbindung mit Grunt eingesetzt. Das funktioniert bis auf das Debuggen mit WebStorm sehr schön. Eine Idee wäre noch die Inline-Source-Map von Browserify mit Exorcist zu extrahieren, aber das habe ich nicht ausgetestet.

It#s magic (WebPack)

Okay vergesst einfach, dass es Browserify und RequireJS gibt. Webpack erledigt es mindestens gleich gut, aber mit mehr Tiefgang. Er ist ein sehr talentierter Bundler für Assets. Das heißt, er kann auch mit allen möglichen Formaten was anfangen (Bildern, JavaScript, CSS, …). Die mächtigste Eigenschaft ist, dass beim Einbinden einer Ressource diese transkodiert werden kann, vorausgesetzt der notwendige Loader ist installiert. Dadurch wird nicht nur JavaScript unterstützt, sondern auch alle möglichen Derivate, wie TypeScript und CoffeScript. Genauso sieht es bei CSS mit LESS oder SASS aus. Mit WebStorm hat das Debuggen auch gleich auf Anhieb geklappt, da die Source-Maps-Übertragung zu WebStorm von Haus aus funktioniert.

Ein weiteres schönes Feature ist die ‚–watch‘ Option, damit wird der Webpack Prozess am Leben gehalten und er beobachtet die Quelldateien. Bei einer Änderung werden diese automatisch in die vorhandenen Übersetzungen integriert, so dass man diese praktisch sofort Testen kann. Dazu kommen noch weitere Nützlichkeiten von Webpack, wie das Chunking, bei dem der Entwickler auswählen kann, welche Module in welchem Part geladen werden.

Vieles von den vorgestellten Möglichkeiten können auch mit Grunt umsetzten werden, aber Webpack vereinfacht es doch schon ordentlich. Richtig mächtig wird es, wenn man Webpack in Grunt integriert 😉

Installation von Webpack

Um Webpack installieren zu können, benötigt man Node.js und NPM (Node.js beinhaltet NPM). Danach installiert man am besten erst einmal die neueste Version von NPM:

npm install npm@latest -g

Am besten installiert man Webpack global:

npm install webpack -g 

Alternativ kann es auch lokal in ein Projekt installiert werden, dann wird die ausführbare Datei unter „node_modules/.bin/webpack“ gespeichert.

Konfiguration von Webpack

Beim Ausführen von webpack wird in dem aktiven Ordner nach einer Konfigurations-Datei gesucht, der `webpack.config.js`. Diese Datei beinhaltet die komplette Konfiguration zum Packen und Bauen der Anwendung. Will man eine andere Konfiguration verwenden, zum Beispiel für ein Release-Build, kann man das beim Start von Webpack mit `–config pfad` angeben. Ein Beispiel für so eine Konfigurations-Datei ist:

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
  }
};
  • Entry: Gibt den Einstiegspunkt an, hier startet Webpack seine Suche nach eingebunden Ressourcen
  • Output: Beschreibt den Dateinamen und den Ort der zusammengefassten Datei.

Weiterhin lohnt sich ein Blick auf die Dokumentation von Webpack.

Jetzt muss man nur noch in der Datei, die bei `entry` festgelegt wurde, `require(…)` oder `import` benutzt werden und dann bindet Webpack NPM- oder eigene Module ein.