Webpack in Plain English

The Core Concepts

At first: 😤😱😭 

Now:😍😍😍 

What is Webpack?

A Module Bundler

Why Webpack?

The Webpack Flow

Entry

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!

Webpack in Plain English

By Sam Julien

Webpack in Plain English

  • 370
Loading comments...

More from Sam Julien