# Dev server and hot reload — Webpack

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

> Speed up development with live reloading.

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

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