Save 37% off PRO during our Black Friday Sale! »

A re-introduction to webpack - DRAFT

08f8df25ec3b58272bd422dab475006f?s=47 Praveen Puglia
April 05, 2018
41

A re-introduction to webpack - DRAFT

08f8df25ec3b58272bd422dab475006f?s=128

Praveen Puglia

April 05, 2018
Tweet

Transcript

  1. A re-introduction to webpack Praveen Puglia Draft Slides

  2. Praveen Puglia Sainthia, West Bengal Senior Software Engineer @praveenpuglia

  3. It all starts here https://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4

  4. Talking about modern browsers

  5. Good enough! <script type="text/javascript" src="app.js"></script>

  6. Internet speeds

  7. Maintenance is important app.js home.js login.js album.js slider.js signup.js social.js

  8. (+=) Concatenate home.js += login.js += album.js += slider.js +=

    signup.js += social.js = app.js
  9. Which order though? 1. home.js 2. login.js 3. album.js 4.

    slider.js 5. signup.js 6. social.js 3 2 1 5 6 4 1 3 5 6 4 2 1 2 4 3 6 5
  10. If you messed it up

  11. Humans • Many files • Comments • Debugging • Long,

    descriptive names $
  12. Computers • Anything that the hooman didn’t like

  13. Being Human

  14. The world of tools • JSMin • YUI Compressor •

    Closure Compiler • UglifyJS • Gulp, Grunt
  15. No Solution • Still concatenating • Human dependent dependency management

    • Serving everything at once • Serving code that wasn’t required
  16. CommonJS // add.js function add (a, b) { return a

    + b } module.exports = add // index.js const add = require('./add') console.log(add(4, 5)) //9
  17. Things CommonJS solved • Dependency Management • Only bundle things

    that are required.
  18. Unhappy Browsers ☹

  19. Browserify

  20. What about us? • Images • Videos • HTML •

    Objects • Templates • … … …
  21. webpack

  22. Import everything! require('../style.css'); require('../logo.png');

  23. webpack’s purpose • Asset reuse • Hot Module Replacement •

    Code Splitting
  24. React endorsed webpack The only time you are gonna see

    the React logo in this talk!
  25. webpack is hard!

  26. – John Webpacker “It’s a myth!”

  27. To understand webpack • Entry • Output • Rules &

    loaders • Plugins
  28. Demo Time!

  29. Webpack 4 • #0CJS, Modes, Defaults • Superfast! • CLI

    upgrades • Even better modules & WASM
  30. Thank You