Webpack Įkėlimo Programėlės

Norint išplėsti Webpack galimybes taip pat naudojamos įkėlimo programėlės. Jos leidžia paimti tam tikro tipo failus ir atlikti su jais tam tikras operacijas.

Pavyzdžiui, galima paimti visus failus su plėtiniu .less, transformuoti jų tekstą į CSS, tada gautą CSS sumažinti ir išsaugoti viename bendrame faile.

Pažiūrėkime bendrąją schemą, kaip dirbti su įkėlimo programėle, naudodami dviejų įsivaizduojamų įkėlimo programėlių pavyzdį.

Įdiegkime pirmąją įkėlimo programėlę:

npm install test-loader1 --save-dev

Įdiegkime antrąją įkėlimo programėlę:

npm install test-loader2 --save-dev

Įdiegus įkėlimo programėles, galime jas panaudoti konfigūracijos faile (importuoti jų nereikia). Žiūrėkite sintaksę:

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.css$/i, // failo tipas
				use: ['test-loader1', 'test-loader2'], // įkėlimo programėlės
			},
		],
	},
};

Masyvo elementus galima užrašyti ne į eilutę, o stulpeliu:

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

Skirtingiems failų tipams galima rašyti skirtingas taisykles:

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

Įkėlimo programėlės vykdomos paeiliui. Be to, eilė prasideda nuo masivo pabaigos. Tai yra, pirmiausia vykdoma įkėlimo programėlė, nurodyta paskutiniu masivo elementu, po to priešpaskutine ir taip toliau.