Webpack betöltők

A Webpack képességeinek bővítésére betöltők is használatosak. Lehetővé teszik, hogy egy adott típusú fájlt vegyünk, és meghatározott műveleteket hajtsunk végre velük.

Például vehetjük a .less kiterjesztésű összes fájlt, átalakíthatjuk a szövegüket CSS-sé, majd a kapott CSS-t minimalizálhatjuk és egy közös fájlba menthetjük.

Nézzük meg a betöltőkkel való munka áltános sémáját két képzelt betöltő példáján.

Telepítsük az első betöltőt:

npm install test-loader1 --save-dev

Telepítsük a második betöltőt:

npm install test-loader2 --save-dev

A betöltők telepítése után használhatjuk őket a konfigurációs fájlban (nem kell importálni őket). Nézd meg a szintaxist:

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.css$/i, // fájltípus
				use: ['test-loader1', 'test-loader2'], // betöltők
			},
		],
	},
};

A tömb elemeit nem sorban, hanem oszlopban is lehet írni:

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

Különböző fájltípusokhoz különböző szabályokat írhatunk:

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

A betöltők sorban hajtódnak végre. Eközben a sorrend a tömb végétől kezdődik. Vagyis először a tömb utolsó elemének megfelelő betöltő hajtódik végre, majd az utolsó előtti, és így tovább.