Webpack
14 likes5,852 views
This document discusses JavaScript modules and module bundlers like Webpack. It describes the purposes of JavaScript modules as encapsulation, organization, avoiding global scope pollution, and reusability. It then covers different ways to define modules, including using global variables, AMD, CommonJS, and ES6 modules. Webpack is introduced as a module bundler that can bundle modules, implement code splitting to optimize loading, and use loaders to treat different file types as modules. Webpack's plugin system and development tools are also discussed.
Webpack
- 1. Let’s talk about Aleksandr Tkalenko JS developer DataArt Dnepropetrovsk Dnepropetrovsk 2015 1
- 2. JS modules 2
- 3. - encapsulation - organization JS modules PURPOSES 3
- 4. - encapsulation - organization JS modules PURPOSES ● no global scope pollution ● different library versions use ● security 4
- 5. - encapsulation - organization JS modules PURPOSES ● convenient using ● decoupling ● re-use / DRY principle 5
- 6. - global variables / namespace / tag - AMD - AMD with CommonJS - CommonJS WAYS TO DEFINE MODULES 6
- 7. - global variables - AMD - AMD with CommonJS - CommonJS WAYS TO DEFINE MODULES 7
- 8. - global variables - AMD - AMD with CommonJS - CommonJS WAYS TO DEFINE MODULES 8
- 9. - global variables - AMD - AMD with CommonJS - CommonJS WAYS TO DEFINE MODULES 9
- 10. - global variables - AMD - AMD with CommonJS - CommonJS WAYS TO DEFINE MODULES - ES6 Modules 10
- 11. JS MODULE TOOLS - RequireJS - Browserify - wreq - curl - jspm 11
- 13. installation and use Installs as a npm package Could be runned from CLI … or as NodeJS package from script WEBPACK 13
- 14. - PLUGINS WEBPACK - DEV TOOLS provides - CODE SPLITTING - LOADERS 14
- 15. code splitting WEBPACK + get only what you need - many requests => much overhead - request latency + one request, less latency - get all bunch REQUEST PER MODULE ALL IN ONE REQUEST to organize modules as chunks 15
- 16. WEBPACK + get only what you need + less requests, less overhead MODULES TO CHUNKS code splittingto organize modules as chunks 16
- 17. WEBPACK Defining splitting point code splittingto organize modules as chunks 17
- 18. WEBPACK PNG PNG less CSS sass jade hbs haml woff ttf eofJS JSX coffee what parts modern webapp consists of? JS HTML PNG CSS loadersto treat any static asset as a module 18
- 19. WEBPACKloadersto treat any static asset as a module 19
- 20. WEBPACKloadersto treat any static asset as a module 20
- 21. WEBPACKloadersto treat any static asset as a module … and to run tests 21
- 22. WEBPACK list of loaders loadersto treat any static asset as a module 60+ 22
- 23. rich plugin system WEBPACK to get inside the process wanna some dependency injection bower modules uglified javascript with sourceMaps ?smart chunks loading 23
- 24. 24
- 25. rich plugin system WEBPACK to get inside the process PLUGINS! 25
- 26. rich plugin system WEBPACK to get inside the process 26
- 27. rich plugin system WEBPACK to get inside the process 27
- 28. rich plugin system WEBPACK to get inside the process 28
- 29. rich plugin system WEBPACK to get inside the process 29
- 30. rich plugin system WEBPACK to get inside the process smart common chunks extraction p1.entry.chunk.js p2.entry.chunk.js p3.entry.chunk.js common.chunk.js 30
- 31. rich plugin system WEBPACK to get inside the process list of plugins 20+ 31
- 32. dev tools and other stuff WEBPACK to make work fun and easy - DEV SERVER - HOT MODULE REPLACEMENT - DEPENDENCIES VISUALIZATION 32
- 33. dev tools and other stuff WEBPACK to make work fun and easy 33
- 34. COMPARISON feature WEBPACK RequireJS Browserify CommonJS yes wrapping in yes AMD yes yes no Chunks on demand yes yes no expressions in require yes no no Runtime overhead 243b + 20b per module + 4b per dependency 14.7kb + 0b per module + (3b + X) per dependency 415b + 25b per module + (6b + 2X) per dependency 34
- 35. Q/A ??? “ Let’s talk about Webpack ” Aleksandr Tkalenko DataArt Dnepropetrovsk 2015 35