Loaderi u Webpack-u

Za proširenje mogućnosti Webpack-a takođe se koriste loaderi. Oni omogućavaju uzimanje fajlova određenog tipa i izvođenje određenih operacija sa njima.

Na primer, moguće je uzeti sve fajlove sa ekstenzijom .less, transformisati njihov tekst u CSS, zatim dobijeni CSS minimizovati i sačuvati u jedan opšti fajl.

Hajde da pogledamo opštu šemu rada sa loader-om na primeru dva zamšljena loader-a.

Hajde da instalirajmo prvi loader:

npm install test-loader1 --save-dev

Hajde da instalirajmo drugi loader:

npm install test-loader2 --save-dev

Nakon instalacije loader-a možemo da ih iskoristimo u konfiguracionom fajlu (nije ih potrebno importovati). Pogledajte sintaksu:

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

Elemente niza je moguće zapisati ne u red, već u kolonu:

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

Za različite tipove fajlova mogu se pisati različita 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'
				],
			},
		],
	},
};

Loaderi se izvršavaju redom. Pri tome redosled počinje od kraja niza. To znači da se prvo izvršava loader, naveden kao poslednji element niza, zatim pretposlednji i tako dalje.