Modules & bundlers

What you'll learn

• ESM and CJS — what's actually different at runtime
• How `import 'foo'` finds a file (and where it can fail)
• package.json fields that decide library shape
• Dual-package authorship without the hazards
• Code splitting, dynamic imports, and tree shaking — what works, what's a wish
• Source maps, dev servers, HMR — the developer-experience layer
• Picking a bundler in 2026 — Vite, Webpack, esbuild, Rollup

1. 01
   The two module systems

   ESM and CJS, what each does at runtime, and why mixing them hurts.
   14 min
2. 02
   ES modules in depth

   Static syntax, hoisting, live bindings — and what that buys you.
   15 min
3. 03
   CommonJS, honestly

   require, module.exports, and the corners you still meet today.
   13 min
4. 04
   Module resolution

   How tools find files, packages, and the algorithm that explains weird errors.
   16 min
5. 05
   package.json that doesn't bite

   main, module, exports, types — the fields and how tools read them.
   16 min
6. 06
   Dual packages without pain

   Shipping one library that works for ESM and CJS consumers.
   14 min
7. 07
   Dynamic imports and code splitting

   import() at runtime, route splits, and the prefetch knobs that matter.
   14 min
8. 08
   What a bundler actually does

   Graph, transform, output — strip away the marketing.
   15 min
9. 09
   Tree shaking, in practice

   When dead code goes, when it sticks, and why sideEffects exists.
   14 min
10. 10
    Source maps

    What they map, where they leak, and how to inspect them.
    12 min
11. 11
    Dev servers and HMR

    Hot module replacement, what state survives, and what doesn't.
    13 min
12. 12
    Picking a bundler in 2026

    Vite, Webpack, esbuild, Rollup — honest tradeoffs.
    15 min