Webpack-да лоадерлар

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'
				],
			},
		],
	},
};

Лоадерлар навбат билан бажарилади. Бунда навбат массивнинг охиридан бошланади. Яъни биринчи бўлиб массивнинг охирги элементида кўрсатилган лоадер бажарилади, сўнгра охиргидан олдинги ва ҳоказо.