# Loaders और rules — Webpack: Module Bundling और Build Optimization

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

> CSS और modern JavaScript process करने के लिए Webpack loaders और module rules उपयोग करें, और जानें कि loader order क्यों मायने रखता है।

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

Webpack natively केवल JavaScript और JSON समझता है। **Loaders** अन्य file types को valid modules में transform करते हैं। वे pattern (`test`) से files match करते हैं और transformations (`use`) apply करते हैं। Common loaders में JavaScript transpilation के लिए babel-loader और CSS के लिए css-loader व style-loader शामिल हैं। Images और fonts के लिए file-loader की जगह Webpack 5 asset modules का उपयोग करें।

## 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
- [ ] Alphabetical order

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