# Plugins और extensions — Webpack

Source: https://www.geekswithgeeks.com/hi/webpack/webpack-05

> Plugins के साथ Webpack functionality को extend करें।

## Plugins बनाम loaders

**Loaders** specific file types को transform करते हैं। **Plugins** Webpack build lifecycle में hook करके broader tasks perform करते हैं। Plugins HTML files generate कर सकते हैं, CSS extract कर सकते हैं, code minify कर सकते हैं।

## Common plugins

Production builds के लिए HtmlWebpackPlugin और MiniCssExtractPlugin use करें।

```javascript
const HtmlPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new HtmlPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' })
  ]
};
```

Output:

```
Generates index.html and extracts CSS to separate bundle
```

## Plugin instantiation महत्वपूर्ण है

Plugins को 'new' के साथ instantiate करना जरूरी है। Plugins array को plugin instances मिलते हैं, classes नहीं।

त्वरित जाँच

**Quiz:** Loaders और plugins के बीच मुख्य अंतर क्या है?

- [x] Loaders specific files को transform करते हैं; plugins build lifecycle में hook करते हैं।
- [ ] Plugins files को process करते हैं; loaders lifecycle को extend करते हैं।
- [ ] वे अलग तरीके से एक ही चीज करते हैं।

*Answer:* Loaders specific files को transform करते हैं; plugins build lifecycle में hook करते हैं।. Loaders individual files पर काम करते हैं, जबकि plugins Webpack compilation process में hook करते हैं।