Лоадери у Вебпаку

За проширење могућности Вебпака такође се користе лоадери. Они омогућавају узимање фајлова одређеног типа и извођење одређених операција са њима.

На пример, могуће је узети све фајлове са екстензијом .less, претворити њихов текст у ЦСС, затим добијени ЦСС минимизовати и сачувати у један заједнички фајл.

Хајде да погледамо општу шему рада са лоадером на примеру два замишљена лоадера.

Инсталирајмо први лоадер:

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

Лоадери се извршавају редом. Притом редослед почиње од краја низа. То значи да се првим извршава лоадер који је наведен као последњи елемент низа, затим претпоследњи и тако даље.