Understanding Webpack Hot Module Replacement (HMR): Mechanism and Implementation

Webpack Hot Module Replacement (HMR) is a built‑in feature that updates changed modules in the browser without a full page reload, preserving application state and speeding up development.

The main advantages of HMR are state preservation, faster incremental updates, and instant visual feedback for CSS/JS changes.

In a typical Vue project the HMR workflow relies on a stack of webpack, webpack-dev-middleware, webpack-hot-middleware and an Express server, which together compile, serve from memory, and push updates to the client.

When the project starts, Webpack performs an initial compilation and outputs a hash (e.g., 3606e1ab1ddcf6626797). After each code change the console shows a new hash, a .hot-update.json manifest, and a .hot-update.js file containing the changed modules.

Webpack’s watch mode keeps the compiler running; it monitors file changes, triggers a recompilation, and then continues watching.

The dev middleware serves compiled assets from an in‑memory filesystem ( memory-fs), so no files are written to disk. Example configuration:

const webpack = require('webpack');
const webpackConfig = require('./webpack.dev.conf');
const compiler = webpack(webpackConfig);
const devMiddleware = require('webpack-dev-middleware')(compiler, {
  // self‑define options
});

The hot middleware creates a communication channel between the browser and the server using Server‑Sent Events. It injects a client script ( webpack-hot-middleware/client.js) that opens an EventSource to /__Webpack_hmr and listens for messages.

var options = {
  path: '/__Webpack_hmr',
  timeout: 20 * 1000,
  overlay: true,
  reload: false,
  log: true,
  warn: true,
  name: '',
  autoConnect: true,
  overlayStyles: {},
  overlayWarnings: false,
  ansiColors: {}
};

The client registers listeners and processes incoming JSON messages. A simplified handler looks like:

function processMessage(obj) {
  switch (obj.action) {
    case 'building':
      // rebuilding
      break;
    case 'built':
      // rebuilt in n ms
    case 'sync':
      var applyUpdate = true;
      if (applyUpdate) {
        processUpdate(obj.hash, obj.modules, options);
      }
      break;
    default:
      // other actions
  }
}

During a hot update, the client requests /hash.hot-update.json to obtain the list of changed files, then loads each fileChunk.hash.hot-update.js via a dynamically inserted <script> tag. The runtime defines webpackHotUpdate which iterates over the new modules and applies them without reloading the page.

In summary, HMR works by establishing a persistent SSE connection, detecting changes, delivering a manifest, fetching updated chunks, and applying them through the runtime, resulting in rapid, state‑preserving development cycles.