Das Dokument bietet eine umfassende Einführung in das Bundling mit Webpack, einschließlich der Vorteile, Module-Formate, und der Auswahl von Automatisierungs- und Bundling-Tools. Es erklärt die Notwendigkeit von Bundling zur Verbesserung der Leistung, Unterstützung von Modulformaten sowie die Konfiguration von Webpack für verschiedene Dateitypen. Darüber hinaus behandelt es die Integration von CommonJS und Node.js sowie die Nutzung von webpack.config.js zur Definition von Bundles.

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