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

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

> webpack-dev-server, hot module replacement, history fallback और API proxy से development तेज़ करें।

## Development server के benefits

webpack-dev-server bundles को memory से serve करता है instant feedback के लिए। **HMR** (Hot Module Replacement) changed modules को full page reload के बिना replace करता है, application state को preserve करता है।

## Dev server को configure करें

Webpack-dev-server को HMR के साथ set up करें।

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

## HMR updates को accept करें

अपने module के लिए HMR को enable करने के लिए, updates को accept करने के लिए code जोड़ें। Frameworks जैसे React में loaders हैं जो इसे automatically handle करते हैं।

त्वरित जाँच

**Quiz:** HMR क्या करता है?

- [x] Full page reload के बिना modules को replace करता है।
- [ ] Bundles को automatically compress करता है।
- [ ] JavaScript code को minify करता है।
- [ ] हर बदलाव पर Node.js process restart करना।

*Answer:* Full page reload के बिना modules को replace करता है।. HMR running application में modules को update करता है बिना full page reload के, state को preserve करता है।