# Dev server and hot reload — Webpack: Module Bundling and Build Optimization

Source: https://www.skillbyai.com/en/webpack/webpack-12

> Speed up development with webpack-dev-server, hot module replacement, history fallback and an API proxy.

## 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.

```javascript
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

**Quiz:** What does HMR do?

- [x] Replaces modules without full page reload.
- [ ] Compresses bundles automatically.
- [ ] Minifies JavaScript code.
- [ ] Restarts the Node.js process on every change.

*Answer:* Replaces modules without full page reload.. HMR (Hot Module Replacement) updates modules in the running application without requiring a full page reload, preserving state.