Webpack

Kevin Herklotz, Junior FE-Developer, stellt Webpack vor, ein Tool, das immer häufiger von Entwicklern eingesetzt wird und „auf dem Vormarsch“ ist. Es stellt eine Schnittstelle bereit, um Entwicklungsprozesse in der Frontendentwicklung abzubilden und zu optimieren. Seinen Vortrag hat er auf dem MobileCamp 2016 in Dresden gehalten.

Transcript

1. GROUP
2. Webpack
3. Was ist Webpack Voraussetzungen CLI Loader Konfigurations-Datei Plugins Code Splitting Hot Module Replacement Zusammenfassung Agenda
4. Über mich Kevin Herklotz 26 Jahre Frontend-Developer bei move:elevator ca. 1,5 Jahre Berufserfahrung Twitter: @KevinHerklotz https://github.com/KevinHerklotz/webpack-demo
5. Was ist Webpack?
6. Folienüberschrift Aufzählung
 im Idealfall nicht mehr als zwei Zeilen
 Aufzählung
 im Idealfall nicht mehr als zwei Zeilen
 Aufzählung
 im Idealfall nicht mehr als zwei Zeilen
 Aufzählung
 im Idealfall nicht mehr als zwei Zeilen Was ist Webpack? http://www.sebastian-gebhardt.de/webpack.php
7. build tool / module bundler ‣ teilt Abhängigkeiten in „Chunks“ auf, die bei Bedarf geladen werden Was ist Webpack
8. https://webpack.github.io/docs/what-is-webpack.html
9. build tool / module bundler ‣ teilt Abhängigkeiten in „Chunks“ auf, die bei Bedarf geladen werden ‣ Werkzeuge für Entwicklung (Source Maps, Hot Reload, Minifizierer, …) ‣ umfangreiche Erweiterbarkeit ‣ umfangreiche Konfigurierbarkeit ‣ geeignet für sehr große Projekte Was ist Webpack?
10. Voraussetzungen
11. Node.js (nmp install webpack -g) 
 (nmp install webpack-dev-server -g)
 
 Voraussetzungen
12. CLI
13. webpack <entry> <output> CLI -d --debug --devtool source-map --output-pathinfo -p --optimize-minimize --optimize-occurence-order --watch watches all dependencies and recompile on change --progress compilation progress to stderr --display-chunks display the separation of the modules into chunks --display-reasons show more information about the reasons why a module is included
14. webpack entry.js bundle.js CLI - Beispiel siehe Code-Beispiel 1 https://github.com/k9ordon/webpack-ftw/blob/master/assets/1.png
15. Loader
16. ‣ erweitert das Handling von Modulen ‣ gibt String zurück ‣ Beispiele: svg, uglify, babel, jade, twig, mustache, ngtemplate, react-templates, sass, autoprefixer, eslint, … 1. npm install {name}-loader 2. In JS-Datei: require('{name}!./path/to/file'); Beispiel CSS: npm i css-loader style-loader —save-dev var css = require('style!css!./foo.css'); Loader
17. Loader siehe Code-Beispiel 2 https://github.com/k9ordon/webpack-ftw/blob/master/assets/2.png
18. Loader / Code Beispiel 2 entry.js index.html im Browser
19. Loader / Code Beispiel 2 Entwicklertools
20. Konfigurations-Datei
21. Konfigurations-Datei / Beispiel 3 webpack.config.js
22. Konfigurations-Datei / Beispiel 3 package.json entry.js
23. Plugins
24. ‣ erweitern die Funktionalitäten von Webpack ‣ Beispiele: ‣ progress-plugin ‣ webpack-angular-resource-plugin ‣ html-webpack-plugin ‣ uvm. ‣ erweitern die Funktionalitäten von Webpack
 Plugins siehe Code-Beispiel 4
25. Plugins / Beispiel 4 webpack.config.js
26. Plugins / Beispiel 4 npm install html-webpack-plugin --save-dev demo.html (generiert)
27. Code Splitting
28. Code Splitting ‣ optionales Feature ‣ Modul Abhängigkeiten in „Chunks“ aufteilen ‣ nicht gebrauchter Code wird nicht geladen: ‣ kürzere initiale Ladezeiten ‣ CommonsChunkPlugin ‣ gleiche Module in verschiedenen Chunks werden automatisch erkannt und nur einmal geladen ‣ bereits in Webpack integriert 

29. Code Splitting siehe Code-Beispiel 5 https://github.com/k9ordon/webpack-ftw/blob/master/assets/4.png
30. Code Splitting / Beispiel 5 webpack.config.js
31. Hot Module Replacement
32. Hot Module Replacement ‣ „webpack-dev-server“ ‣ kleiner lokaler Webserver ‣ erkennt Änderungen an euren Quelldateien: ‣ transformiert automatisch neu ‣ lädt eure Website neu ‣ übersetzt NUR geänderte Dateien neu 

33. Hot Module Replacement siehe Code-Beispiel 6 https://github.com/k9ordon/webpack-ftw/blob/master/assets/4.png
34. Hot Module Replacement https://webpack.github.io/docs/hot-module-replacement-with-webpack.html, giphy.com/gifs/KI01DytlVPEw8
35. Zusammenfassung
36. Vorteile + geringere Ladezeiten durch Code-Splitting + Erweiterbarkeit + wachsende Community + schneller "Hot Mode" webpack.github.io/docs/comparison.html Nachteile - nur ein "Hobby"-Hauptentwickler - unausgereifte Dokumentation Zusammenfassung
37. Vielen Dank für eure Aufmerksamkeit!
38. Fragen? Ja Nein Vielleicht