Laadurid Webpackis

Webpacki võimaluste laiendamiseks kasutatakse ka laadureid. Need võimaldavad võtta teatud tüüpi faile ja nendega teha teatud operatsioone.

Näiteks on võimalik võtta kõik failid laiendiga .less, teisendada nende tekst CSS-iks, seejärel minimeerida saadud CSS-i ja salvestada see ühisse faili.

Vaatame üldist skeemi laaduriga töötamiseks näite kahe kujutletava laaduri puhul.

Paigaldame esimese laaduri:

npm install test-loader1 --save-dev

Paigaldame teise laaduri:

npm install test-loader2 --save-dev

Pärast laadurite paigaldamist saame neid kasutada konfiguratsioonifailis (neid ei pea importima). Vaata süntaksit:

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

Massiivi elemente saab kirjutada mitte reana, vaid veeruna:

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

Erinevate failitüüpide jaoks saab kirjutada erinevaid reegleid:

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

Laadurid käivitatakse järjekorras. Järjekord algab massiivi lõpust. See tähendab, et esimesena käivitub laader, mis on määratud massiivi viimase elemendina, seejärel eelviimane ja nii edasi.