Webpack FTW

Webpack FTW

Be4d34a0c1926f75f805604085fa95f4?s=128

Klemens Gordon

February 25, 2016
Tweet

Transcript

  1. 3.

    IRL

  2. 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.
  3. 5.

    WTf

  4. 10.

    once upon a time … ~2005 v1 - ~ 1

    developer - windows xp was the hottest shit - there was no iphone - cleartype was opt in - internetexplorer ...
  5. 13.

    why its bad to ship js and css as sourcefiles:

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

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

    of the jquery - gui is getting more complexe (autocompletes, ajax ftw, yadda) => more frontend code
  7. 16.
  8. 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
  9. 20.

    v3 … ~2013 - ~ 5 devs - even more

    client app stuff - responsive - amd patterns (with curljs) - grunt.js - concat all the things - less
  10. 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
  11. 25.
  12. 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
  13. 27.
  14. 28.
  15. 29.
  16. 30.
  17. 31.
  18. 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
  19. 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
  20. 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
  21. 41.