# Loaders और rules — Webpack

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

> Webpack को विभिन्न file types को process करना सिखाएँ।

## Loaders क्या करते हैं

Webpack नatively केवल JavaScript समझता है। **Loaders** अन्य file types को valid modules में transform करते हैं। वे file patterns के साथ काम करते हैं और transformations apply करते हैं। Common loaders में babel-loader JavaScript transpilation के लिए, style-loader CSS के लिए शामिल हैं।

## Loaders को configure करें

CSS और JavaScript को transpilation के साथ process करने के लिए module rules add करें।

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: { presets: ['@babel/preset-env'] }
        }
      }
    ]
  }
};
```

Output:

```
Loaders process files matching test pattern left-to-right
```

## Loader order महत्वपूर्ण है

Loaders 'use' array में right-to-left execute होते हैं। CSS के लिए, css-loader CSS को parse करता है, फिर style-loader इसे DOM में inject करता है।

त्वरित जाँच

**Quiz:** 'use' array में loaders किस direction में execute होते हैं?

- [x] Right से left
- [ ] Left से right
- [ ] Random order

*Answer:* Right से left. Loaders right से left execute होते हैं, तो rightmost loader पहले चलता है।