Webpack
Transcript of Webpack
- encapsulation
- organization
JS modules PURPOSES
● no global scope pollution
● different library versions use
● security
4
- encapsulation
- organization
JS modules PURPOSES
● convenient using
● decoupling
● re-use / DRY principle
5
installation and use
Installs as a npm package
Could be runned from CLI
… or as NodeJS package from script
WEBPACK
13
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
WEBPACK
+ get only what you need+ less requests, less overhead
MODULES TO CHUNKS
code splitting to organize modules as chunks
16
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
rich plugin system WEBPACKto get inside the process
wanna somedependency injection
bower modulesuglified javascript with sourceMaps ?smart chunks loading
23
rich plugin system WEBPACKto get inside the process
smart common chunks extraction
p1.entry.chunk.js
p2.entry.chunk.js
p3.entry.chunk.js
common.chunk.js
30
dev tools and other stuff WEBPACKto make work fun and easy
- DEV SERVER- HOT MODULE REPLACEMENT- DEPENDENCIES VISUALIZATION
32
COMPARISONfeature 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 overhead243b + 20b per module + 4b
per dependency
14.7kb + 0b per module + (3b +
X) per dependency
415b + 25b per module +
(6b + 2X) per dependency
34