HMR & Source Maps Lab

Two things the dev server gives you: Hot Module Replacement (update modules without losing state) and source maps (debug your original code, not the bundle).

1 · Full reload vs Hot Module Replacement

Increment each counter, then "edit a module". The left page reloads and loses state; HMR swaps the module and keeps it.

Without HMR — live reload

count: 0
Full page reload → count resets to 0.

With HMR

count: 0
Module swapped → count preserved.

2 · devtool source-map modes