Webpack-da Loaderlar

Webpack imkoniyatlarini kengaytirish uchun loaderlardan ham foydalaniladi. Ular ma'lum turdagi fayllarni olish va ular bilan ma'lum amallarni bajarishga imkon beradi.

Masalan, .less kengaytmasiga ega bo'lgan barcha fayllarni olib, ularning matnini CSS ga aylantirish, keyin olingan CSS ni minimallashtirish va bitta umumiy faylda saqlash mumkin.

Keling, loaderlar bilan ishlashning umumiy sxemasini ikki tasavvur qilingan loader misolida ko'rib chiqaylik.

Birinchi loaderni o'rnatamiz:

npm install test-loader1 --save-dev

Ikkinchi loaderni o'rnatamiz:

npm install test-loader2 --save-dev

Loaderlarni o'rnatgandan so'ng, ularndan konfiguratsiya faylida foydalanishimiz mumkin (ularni import qilish shart emas). Sintaksisga qarang:

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

Massiv elementlarini qator emas, ustun shaklida ham yozish mumkin:

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

Turli xil fayl turlari uchun turli qoidalar yozish mumkin:

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

Loaderlar navbat bilan bajariladi. Bunda navbat massiv oxiridan boshlanadi. Ya'ni birinchi bo'lib massivning oxirgi elementi sifatida ko'rsatilgan loader bajariladi, keyin oxirdan oldingi va hokazo.