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

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

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

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

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

npm install test-loader1 --save-dev

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

npm install test-loader2 --save-dev

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

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

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

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

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

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

लोडर एक के बाद एक निष्पादित होते हैं। इस मामले में, कतार सरणी के अंत से शुरू होती है। यानी सबसे पहले वह लोडर निष्पादित होता है जो सरणी के अंतिम तत्व के रूप में निर्दिष्ट है, फिर अंत से दूसरा, और इसी तरह।