WEBPACK FOR DUMMIES

@jimeno0

CodeMotion 2017 -Madrid

Jimeno0

Carlos P. Jimeno

Why?

Im a Hypster

The SPA flow

Client

Server

MEANING TONS OF

JS

JS MODULES

Modular code === Maintain

ISSUE

Loading order control

⬆️ HTTP Request === ⬇️ Performance

WEBPACK

THE BASICS

Entry, Output

& Webpack dev server

npm i --save-dev webpack-dev-server

Module Loaders

Babel loader

npm i --save-dev babel-loader babel-core
babel-preset-env

.babelrc

webpack.config.js

Without VS With  babel loader

CSS Loader

npm i --save-dev style-loader css-loader

What about Sass?

npm i --save-dev sass-loader node-sass

Handling Images

npm i --save-dev url-loader image-webpack-loader

Note on image loaders

Lazy loading

JS

Pluggins

Code splitting

User visits

Vendor

JAN

MAR

MAY

VS

Bundle

&

Browser cache FTW

No

Downloaded?

file_HASH.js

User visits

Yes

Download

✔️

Tricky cache thing

🎉

Credits

Webpack 2 course

Webpack your bags

@MadeWithLove

@ste_grider

@jimeno0

🤔

Questions?

https://goo.gl/re3MXY