Nalagalniki v Webpack

Za razširitev zmožnosti Webpack se uporabljajo tudi nalagalniki. Omogočajo prevzem datotek določene vrste in izvajanje določenih operacij z njimi.

Na primer, lahko vzamete vse datoteke s končnico .less, pretvorite njihovo besedilo v CSS, nato dobljeni CSS minimizirate in shranite v skupno datoteko.

Poglejmo si splošno shemo dela z nalagalnikom na primeru dveh namišljenih nalagalnikov.

Namestimo prvi nalagalnik:

npm install test-loader1 --save-dev

Namestimo drugi nalagalnik:

npm install test-loader2 --save-dev

Po namestitvi nalagalnikov lahko uporabimo njihove zmogljivosti v konfiguracijski datoteki (ni jih potrebno uvoziti). Oglejte si sintakso:

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

Elemente polja lahko zapišete ne v vrstico, ampak v stolpec:

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

Za različne tipe datotek lahko pišete različna pravila:

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

Nalagalniki se izvajajo zaporedoma. Pri tem se vrsta začne od konca polja. To pomeni, da se najprej izvede nalagalnik, naveden kot zadnji element polja, nato predzadnji in tako naprej.