ওয়েবপ্যাকে লোডার

Webpack-এর ক্ষমতা প্রসারিত করার জন্যও লোডার ব্যবহার করা হয়। তারা একটি নির্দিষ্ট ধরনের ফাইল নিতে এবং তাদের উপর নির্দিষ্ট অপারেশন 수행 করতে দেয়।

উদাহরণস্বরূপ, আপনি .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'
				],
			},
		],
	},
};

লোডারগুলি ক্রমানুসারে কার্যকর হয়। এই ক্ষেত্রে কিউ অ্যারের শেষ থেকে শুরু হয়। অর্থাৎ, প্রথমে লোডারটি কার্যকর হয়, যেটি অ্যারের শেষ উপাদান হিসেবে নির্দেশিত, তারপর শেষ থেকে দ্বিতীয় এবং আরও অনেক কিছু।