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