# Custom loaders और plugins — Webpack

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

> अपने खुद के loaders और plugins write करें।

## Webpack को extend करना

**Custom loaders** functions हैं जो content को transform करते हैं। वे source code को receive करते हैं और transformed output return करते हैं। **Custom plugins** classes हैं जो Webpack compiler में hook करते हैं।

## Custom loader write करें

एक simple loader बनाएँ जो text files को transform करता है।

```javascript
module.exports = function(content) {
  const result = content.toUpperCase();
  return `export default ${JSON.stringify(result)}`;
};

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: './loaders/uppercase-loader.js'
      }
    ]
  }
};
```

Output:

```
Loader transforms text file content to uppercase
```

## Loaders chainable हैं

Multiple loaders एक ही file को sequentially process करते हैं। प्रत्येक loader output return करता है जो next का input बनता है। Order matters: use array में right-to-left।

त्वरित जाँच

**Quiz:** Loader को input के रूप में क्या मिलता है?

- [x] File की source code content।
- [ ] केवल file path।
- [ ] Compiled JavaScript output।

*Answer:* File की source code content।. Loaders file content को string के रूप में receive करते हैं और transformed content return करते हैं।