Decoding Webpack: Unraveling Its Architecture
summary
Fast, concrete map of webpack internals: 80% of webpack is plugins and plugins are objects with an apply method that tap into tappable hooks; webpack team maintains the tapable library and an enhanced resolver at github.com/webpack/enhanced-resolve. Shows CLI, Node API used by frameworks like Next.js, and the official analyzer at webpack.github.io/analyze. Walks the pipeline: compiler → compilation → resolver → module factory → parser (AST finds imports) → chunk template → bundle. Explains loaders (TypeScript/Sass → JS) and common hooks for optimize, seal, hashing.
AI-written summary · about
chapters (11)
- 0:00Start
- 2:24How to Use Webpack?
- 4:21The Core Concepts: Entry
- 4:56The Dependency Graph
- 5:40The Core Concepts: Output
- 6:19The Core Concepts: Loaders
- 8:20The Core Concepts: Plugins
- 12:27How to create hooks with Tapable?
- 14:01How to tap hooks?
- 21:05Tapable Instances: Parser
- 22:02Tapable Instances: Template
related talks
55mUnderstanding webpack from inside out
22mEverything's a plugin Understanding webpack from the inside out
20mOpening Keynote | Everything’s a plugin: Understanding webpack from the inside out
01h 42mEverything is a plugin! Mastering webpack from the inside out
34mHow to extend webpack with your own plugins
59mDeep Dive into webpack
26mWebpack: Core Concepts and Advance Topics
27mA re-introduction to webpack