Webpack in Plain English

The Core Concepts

At first: 😤😱😭 

What is Webpack?

A Module Bundler

Why Webpack?

The Webpack Flow

Plugins

Loaders

Test by File Name

Loader (e.g. ts-loader)

Output

app.ts

bundle.js

homeComponent.ts

homeComponent.css

angular.js

(e.g. Uglify)

Loaders

• Pre-checks (e.g. linting)
• Transpiling ES6
• Compiling TypeScript
• Processing SCSS/LESS
• Processing images

Plug-Ins

• Optimizing/Minifying
• Extracting CSS
• Separating bundles
• Adding comments
• Bumping versions

Do Stuff to the Imports

Do Stuff to the End Product

Let's start bundling!