Lataajat Webpackissa

Webpackin mahdollisuuksien laajentamiseen käytetään myös lataajia. Ne mahdollistavat tietyn tyyppisten tiedostojen ottamisen ja niille suoritettavien tiettyjen toimintojen suorittamisen.

Esimerkiksi voit ottaa kaikki tiedostot, joiden pääte on .less, muuntaa niiden tekstin CSS:ksi, sitten minimoida saadun CSS:n ja tallentaa sen yhteen yhteiseen tiedostoon.

Katsotaanpa yleistä kaaviota lataajien kanssa työskentelystä esimerkin avulla kahdesta kuvitellusta lataajasta.

Asennetaan ensimmäinen lataaja:

npm install test-loader1 --save-dev

Asennetaan toinen lataaja:

npm install test-loader2 --save-dev

Lataajien asennuksen jälkeen voimme käyttää niitä konfiguraatiotiedostossa (niitä ei tarvitse tuoda). Katso syntaksi:

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

Taulukon elementit voidaan kirjoittaa ei riviksi, vaan sarakkeeksi:

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

Eri tiedostotyypeille voidaan kirjoittaa eri sääntöjä:

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

Lataajat suoritetaan peräkkäin. Jonottaminen alkaa taulukon lopusta. Toisin sanoen ensimmäisenä suoritetaan lataaja, joka on määritelty taulukon viimeisenä elementtinä, sitten toiseksi viimeisenä ja niin edelleen.