=>
10
Modules & bundlers

Modules & bundlers

The plumbing under every modern frontend project — module systems, resolution, and what your bundler is really doing on your behalf.

~ 175 min·12 lessons·updated may 2026

What you'll learn


Lessons

Read in order. Each lesson stands on its own, but the order is deliberate.

12 lessons · ~171 min total

  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

Prerequisites

  • · Comfortable with modern JavaScript
  • · Used npm or another package manager

After this, try