Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webpack FTW

Webpack FTW

Klemens Gordon

February 25, 2016

More Decks by Klemens Gordon

Other Decks in Technology


  1. IRL

  2. 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. WTf

  4. once upon a time … ~2005 v1 - ~ 1

    developer - windows xp was the hottest shit - there was no iphone - cleartype was opt in - internetexplorer ...
  5. why its bad to ship js and css as sourcefiles:

    (a mvp list) - performance (requests, big files) - code gets messy - ……..............................
  6. later … ~2009 v2 - more developer (2-3) - rise

    of the jquery - gui is getting more complexe (autocompletes, ajax ftw, yadda) => more frontend code
  7. 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
  8. v3 … ~2013 - ~ 5 devs - even more

    client app stuff - responsive - amd patterns (with curljs) - grunt.js - concat all the things - less
  9. 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
  10. - 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
  11. 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
  12. 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
  13. more stuff: - analyse - https://webpack.github. io/analyse/ - dev server

    hot module replacement - https://webpack.github.io/docs/hot- module-replacement.html - production builds