Überblick zu Webpack beim Angular Meetup Graz, Juni 2016

1. 1
Bundling mit Webpack
Manfred Steyer
ManfredSteyer
Über mich …
 Manfred Steyer
 SOFTWAREarchitekt.at
 Trainer & Consultant
 Angular
 Server-Side .NET
Page  2

2. 2
Inhalt
Überblick
CommonJS
Webpack
ÜBERBLICK
Page  4

3. 3
Warum Build/ Bundling
 Performance (HTTP 1.1)
 Unterstützung für Module-Formate
 Dev  Deployment
 Minification
 Inlining
 Kompilierung (TypeScript, SASS etc.)
 Berücksichtigung unterschiedlicher Build-
Konfigurationen
Nötige Entscheidungen
Welches Automation-Tool/ Build-Tool ?
Welches Bundling-Tool ?
Welches Modul-Format ?
Darstellung von ES6-Modlen in ES5-Kompilat

4. 4
Automation (Auswahl)
Grunt
Gulp
Broccoli.js
Page  7
Bundling (Auswahl)
Browserify
Webpack
jspm (eigentlich Package-Manager)
Page  8

5. 5
Module-Formate (Auswahl)
AMD
CommonJS (NodeJS)
System (System.register)
UMD
Page  9
Package-Manager (Auswahl)
bower
npm (NodeJS)
jspm

6. 6
COMMONJS
Page  11
CommonJS+Node.js
Defacto-Standard durch Vormachtstellung
von NodeJS
Übliches Format bei Nutzung von npm
Node.js: Selbstbeschreibende Pakete
package.json
Abhängigkeiten in nodes_modules

7. 7
CommonJS im Browser
CommonJS geht davon aus, dass
Abhängigkeiten synchron geladen werden
Synchrones nachladen im Browser nicht
möglich
Lösung: Bundling
Bundler für CommonJS
Browserify
Webpack

8. 8
WEBPACK
Page  15
Verbreitung

9. 9
Eigenschaften
 Für große Anwendungen entwickelt  schnell
 CommonJS, npm
 Nutzt Node.js-Metadaten (package.json)
 Kann über Loader viele Dateiformate bundeln
(TypeScript, HTML, CSS, Bilder etc.)
 Kommt ohne Build-Tool wie Gulp aus
 Konfiguration: deklarativ und nicht imperativ
Mehrere Bundles
 Caching
 HTTP/2
 Komfort bei Entwicklung
 Vendor-Bundle
 App-Bundle

10. 10
Dev-Web-Server
 Überwacht Dateien
 Generiert nur betroffene Bundles neu
 Aktualisiert Browser
 Hält Bundles im Hauptspeicher vor
Webpack
Page  20
File A
File B
File C
File D File E
Entry Point
Bundle
Bundle
Loader (z.B. .ts  .js)

11. 11
webpack.config.js (Auszug)
module.exports = {
debug: true,
devtool: 'source-map',
entry: {
'vendor': ['./app/polyfills', './app/vendor'],
'app': './app/main'
},
output: {
path: __dirname + "/dist",
filename: "[name].js",
publicPath: 'dist/'
},
module: {
loaders: [
{ test: /.html$/, loaders: ['html-loader'] },
{ test: /.ts$/, loaders: ['ts-loader'],
exclude: /node_modules/}
]
},
[…]
}
Bundles einbinden
<script src="dist/vendor.js"></script>
<script src="dist/app.js"></script>

12. 12
DEMO
Page  23
Zusammenfassung
CommonJS
+Node.js
Webpack
Deklarativ
Lazy
Loading