Loadery v Webpacku

Na rozšírenie možností Webpacku sa tiež používajú loadery. Umožňujú brať súbory určitého typu a vykonávať s nimi určité operácie.

Napríklad, môžete vziať všetky súbory s príponou .less, transformovať ich text na CSS, potom získané CSS minimalizovať a uložiť do jedného spoločného súboru.

Pozrime sa na všeobecnú schému práce s loaderom na príklade dvoch imaginárnych loaderov.

Nainštalujme prvý loader:

npm install test-loader1 --save-dev

Nainštalujme druhý loader:

npm install test-loader2 --save-dev

Po inštalácii loaderov ich môžeme použiť v konfiguračnom súbore (importovať ich nie je potrebné). Pozrite si syntax:

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

Prvky poľa je možné zapísať nie do riadku, ale do stĺpca:

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

Pre rôzne typy súborov je možné písať rôzne pravidlá:

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

Loadery sa vykonávajú postupne. Pričom poradie začína od konca poľa. To znamená, že prvý sa vykoná loader, uročený ako posledný prvok poľa, potom predposledný a tak ďalej.