A re-introduction to webpack - DRAFT

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