Webpack FTW

Code examples:
https://github.com/k9ordon/webpack-ftw

Transcript

1. SHIPPING A FRONTEND
2. KLEMENS GORDON Frontend Developer karriere.at likes .JS and STUFF @thisisgordon
3. IRL
4. bundling, precompiling, transforming, factor out, extract text, code splitting, commons chunks, post-loaders, wtf, yadda yadda yadda … to send css and js files to our friend browser.
5. WTf
6. OUR FRIEND BROWSER LIKES JS AND CSS AND ASSETS AND STUFF
7. “FRONT-END OPS” 1. history of shipping frontend at karriere.at 2. webpack examples
8. Browser eats Programmer programms
9. timetravel ...
10. once upon a time … ~2005 v1 - ~ 1 developer - windows xp was the hottest shit - there was no iphone - cleartype was opt in - internetexplorer ...
11. karriere.at v1 - 2005 shipping source files
12. script2.js styles.css Browser script2.js styles.css Programmer script1.js script1.js
13. why its bad to ship js and css as sourcefiles: (a mvp list) - performance (requests, big files) - code gets messy - ……..............................
14. timetravel ...
15. later … ~2009 v2 - more developer (2-3) - rise of the jquery - gui is getting more complexe (autocompletes, ajax ftw, yadda) => more frontend code
17. autocomplete.js styles.css Browser autocomplete.jquery.js styles.css Programmer jquery.js page1.js page2.js autocomplete.jquery.js styles.css page1.min.js jquery.js load me first load me on page 2 before jquery load me on page1 load me on page2 load me everywhere compress page2.min.js
18. - load order - dependencies - post processing
19. more timetraveling
20. v3 … ~2013 - ~ 5 devs - even more client app stuff - responsive - amd patterns (with curljs) - grunt.js - concat all the things - less
21. - @unscriptable John Hann “Introducing RaveJS”
22. Browser page1.less Programmer page1.js page2.css page2.js autocomplete.less autocomplete.js a/_partial.js a/_partial.css b/_partial.js bundled: amd: page2.js page2.less autocomplete.cs autocomplete.js b/_partial.js a/_partial.less a/_partial.js core.js vendor/polyfill page1.css page1.js common.css common.js
23. AMD DEPENDENCIES
24. POST PROCESS HANDCRAFTED BUNDLES ARRAY & SINGLE MODULES
25. GOES OUT
26. - module has dependencies -> load order - browser gets small entry files - more shared code BUT - manual concat is a pain (amd fallback) - .less and .js has separate dependency trees
27. v4 ~2016
32. 1. bundle 2. the css thing 3. loaders 4. code splitting
33. Installation npm install webpack -g npm install webpack-dev-server -g
34. module-b.js 1 Simple Bundle bundle.js contains everything module-a.js requires module b entry.js requires module a
35. 2 the css thing entry.js bundle.js contains everything npm i css-loader style-loader -D entry.css module-b.css module-b.js module-a.css module-a.js
36. 3 loaders entry.es6.js bundle.js contains everything npm i babel-loader babel-core babel-preset-es2015 -D entry.css module-b.css module-b.es6.js module-a.css module-a.es6.js hyperlink
37. 4 code splitting entry1.js bundle1.js npm install extract-text-webpack-plugin -D module-a.js entry2.js module-b.js bundle2.js commons.js
38. more stuff: - analyse - https://webpack.github. io/analyse/ - dev server hot module replacement - https://webpack.github.io/docs/hot- module-replacement.html - production builds
39. one more timetraveling
40. ~2016 HTTP2 SHIPPING SOURCE FILES LIKE ITS 2005
42. questions?