वेबपैक में लोडर

वेबपैक की क्षमताओं का विस्तार करने के लिए लोडर्स का भी उपयोग किया जाता है। वे एक निश्चित प्रकार की फ़ाइलें लेने और उन पर विशेष ऑपरेशन करने की अनुमति देते हैं।

उदाहरण के लिए, आप .less एक्सटेंशन वाली सभी फ़ाइलें ले सकते हैं, उनके टेक्स्ट को CSS में बदल सकते हैं, फिर परिणामी CSS को मिनिमाइज़ कर सकते हैं और एक सामान्य फ़ाइल में सहेज सकते हैं।

आइए दो काल्पनिक लोडरों के उदाहरण पर लोडर के साथ काम करने की सामान्य योजना देखें।

आइए पहला लोडर इंस्टॉल करें:

terminalnpm install test-loader1 --save-dev

आइए दूसरा लोडर इंस्टॉल करें:

terminalnpm install test-loader2 --save-dev

लोडर इंस्टॉल करने के बाद, हम कॉन्फ़िगरेशन फ़ाइल में उनका उपयोग कर सकते हैं (उन्हें इम्पोर्ट करने की आवश्यकता नहीं है)। सिंटैक्स देखें:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i, // फ़ाइल का प्रकार
        use: ['test-loader1', 'test-loader2'], // लोडर
      },
    ],
  },
};

सरणी के तत्वों को एक पंक्ति के बजाय एक कॉलम में लिखा जा सकता है:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
    ],
  },
};

विभिन्न प्रकार की फ़ाइलों के लिए विभिन्न नियम लिखे जा सकते हैं:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.sass$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
      {
        test: /\.less$/i,
        use: [
          'test-loader3',
          'test-loader4'
        ],
      },
    ],
  },
};