Dev server and hot reload

Development server benefits

webpack-dev-server serves bundles from memory for instant feedback. HMR (Hot Module Replacement) replaces changed modules without full page reload, preserving application state. This dramatically improves developer experience by eliminating build-and-reload cycles.

Configure dev server

Set up webpack-dev-server with HMR.

module.exports = {
  devServer: {
    port: 3000,
    hot: true,
    historyApiFallback: true,
    proxy: {
      '/api': 'http://localhost:5000'
    }
  }
};

Output:

Server runs on localhost:3000 with hot reload enabled

Accept HMR updates

To enable HMR for your module, add code to accept updates: if (module.hot) { module.hot.accept(); }. Without this, the page reloads. Frameworks like React have loaders that handle this automatically.

Quick check

Quick check: What does HMR do?

• Replaces modules without full page reload.
• Compresses bundles automatically.
• Minifies JavaScript code.