Webpack & Babel & ES6 & CSS & PostCSS & NPM & Grunt & Gulp &...

Oh my!

A Tooling Explainer

Motivation

Task Runners

Transpilers

Module Bundlers

All I wanted to do was build a web page... :(

Package Managers

Package Managers

Package Managers

Task Runners

Task Runners

Recipes

Transpilers

Transpilers

Turn one thing into another thing

that the browser can understand

Module Bundlers

Module Bundlers

Manage your dependencies: no more endless <script> tags

Include other filetypes locally

babel src/index.js --out-file dist/compiled.js

node-sass --output-style compressed -o dist/css src/scss

postcss --use autoprefixer *.css -d build/

grunt dev:watch

npm start

DEMO

But wait... there's more!

Go for it