SchlagwortWebpack

Webpack: Phaser Template

Hier habe ich für Webpack ziemlich gute Töne angeschlagen, jetzt solle ich es auch mal ein bisschen untermauern.

Im Folgenden stelle ich eine Basistemplate für Phaser vor, welches hier veröffentlicht ist. Das Template unterstützt die Entwicklung in JavaScript und TypeScript. Weiterhin kopiert es die eingebundenen Assets in den Build-Ordner. Es werden Assets in den Formaten .png, .ogg, .mp3 und .json unterstützt. Bilder werden dabei maximal Optimiert.

Installation

Das Template setzt node.js und npm als installiert voraus. Mit npm installiert ihr webpack global und installiert mit die definierten Abhängigkeiten.

npm install -g webpack 
npm install 

Entwicklung starten

Mit npm run dev kann es auch schon mit dem Programmieren losgehen. Mit dem Befehl werden alle mit require(...) eingebunden Ressourcen im Ordner /build/ gebündelt. Der JavaScript Code wird gebündelt und Grafiken werden dabei optimiert. Gleichzeitig wird Webpack angewiesen, so lange es aktiv ist, alle zukünftigen Änderungen am Quellcode sofort zu integrieren. Zuletzt wird ein lokaler Web-Server auf dem Port 3000 gestartet. Wenn man nun localhost:3000/index.html aufruft, kann man gleich mit dem Testen loslegen. Hierbei werden Änderungen am Code auch gleich im Browser aktualisiert.

Die Entwicklung des Spiels findet im Ordner src statt, hier werden alle Asset- und JavaScript-Dateien abgelegt. Damit die Assets ordentlich geladen werden, müssen sie mit require('Pfad/zu') eingebunden werden, wie hier zu sehen. Das Sorgt dafür, dass die Dateien automatisch zu den Builds hinzugefügt werden.

Veröffentlichen

Mit npm run release wird Webpack mit der Konfigurations-Datei webpack.release.config.js gestartet. Dabei wird im Ordner /release/ ein komplett optimiertes Build abgelegt. Sprich, die Bilder sind optimiert und das JavaScript ist zusammengefasst und komprimiert. Eine SourceMap wird nicht erzeugt. Wenn man in der Webpack-Konfigruration einen „publicPath“ definiert, werden alle Ressourcen mit diesem Pfad versehen und von dort geladen.

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.

© 2017 Johannes Wiese

Theme von Anders Norén↑ ↑