Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webpack

473 views

Published on

Überblick zu Webpack beim Angular Meetup Graz, Juni 2016

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Webpack

  1. 1. 1 Bundling mit Webpack Manfred Steyer ManfredSteyer Über mich …  Manfred Steyer  SOFTWAREarchitekt.at  Trainer & Consultant  Angular  Server-Side .NET Page  2
  2. 2. 2 Inhalt Überblick CommonJS Webpack ÜBERBLICK Page  4
  3. 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. 4 Automation (Auswahl) Grunt Gulp Broccoli.js Page  7 Bundling (Auswahl) Browserify Webpack jspm (eigentlich Package-Manager) Page  8
  5. 5. 5 Module-Formate (Auswahl) AMD CommonJS (NodeJS) System (System.register) UMD Page  9 Package-Manager (Auswahl) bower npm (NodeJS) jspm
  6. 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. 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. 8 WEBPACK Page  15 Verbreitung
  9. 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. 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. 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. 12 DEMO Page  23 Zusammenfassung CommonJS +Node.js Webpack Deklarativ Lazy Loading

×