Webpack FTW

Transcript

1. 1.

   SHIPPING A FRONTEND

2. 2.

   KLEMENS GORDON Frontend Developer karriere.at likes .JS and STUFF @thisisgordon

3. 3.

   IRL

4. 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. 5.

   WTf

6. 6.

   OUR FRIEND BROWSER LIKES JS AND CSS AND ASSETS AND

   STUFF
7. 7.

   “FRONT-END OPS” 1. history of shipping frontend at karriere.at 2.

   webpack examples
8. 8.

   Browser eats Programmer programms

9. 9.

   timetravel ...

10. 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. 11.

    karriere.at v1 - 2005 shipping source files

12. 12.

    script2.js styles.css Browser script2.js styles.css Programmer script1.js script1.js

13. 13.

    why its bad to ship js and css as sourcefiles:

    (a mvp list) - performance (requests, big files) - code gets messy - ……..............................
14. 14.

    timetravel ...

15. 15.

    later … ~2009 v2 - more developer (2-3) - rise

    of the jquery - gui is getting more complexe (autocompletes, ajax ftw, yadda) => more frontend code
16. 16.

    None
17. 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. 18.

    - load order - dependencies - post processing

19. 19.

    more timetraveling

20. 20.

    v3 … ~2013 - ~ 5 devs - even more

    client app stuff - responsive - amd patterns (with curljs) - grunt.js - concat all the things - less
21. 21.

    - @unscriptable John Hann “Introducing RaveJS”

22. 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. 23.

    AMD DEPENDENCIES

24. 24.

    POST PROCESS HANDCRAFTED BUNDLES ARRAY & SINGLE MODULES

25. 25.

    GOES OUT

26. 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. 27.

    v4 ~2016

28. 28.

    None
29. 29.

    None
30. 30.

    None
31. 31.

    None
32. 32.

    1. bundle 2. the css thing 3. loaders 4. code

    splitting
33. 33.

    Installation npm install webpack -g npm install webpack-dev-server -g

34. 34.

    module-b.js 1 Simple Bundle bundle.js contains everything module-a.js requires module

    b entry.js requires module a
35. 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. 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. 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. 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. 39.

    one more timetraveling

40. 40.

    ~2016 HTTP2 SHIPPING SOURCE FILES LIKE ITS 2005

41. 41.

    None
42. 42.

    questions?