Webpack-däki ýükleýjiler

Webpack-iň mümkinçiliklerini giňeltmek üçin şeýle-de ýükleýjiler peýdalanylýar. Olar belli bir görnüşli faýllary alyp, olary bilen belli bir amallary ýerine ýetirmäge mümkinçilik berýär.

Mysal üçin, giňeldişi .less bolan ähli faýllary alyp, olaryň tekstdyny CSS-e öwürmek, soňra alnan CSS-i minimalizirlemek we bir umumi faýlda saklamak bolýar.

Geliň, iki hýýal edilen ýükleýjiniň mysalynda ýükleýji bilen işlemeğiň umumy shemasyna ser salalyň.

Birinci ýükleýjini ornadalym:

npm install test-loader1 --save-dev

Ikinji ýükleýjini ornadalym:

npm install test-loader2 --save-dev

Ýükleýjileri ornatdan soň, biz konfigurasiýa faýlynda olardan peýdalanyp bileris (olary importirlemek gerek däl). Sintaksisa serediň:

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.css$/i, // faýlyň görnüşi
				use: ['test-loader1', 'test-loader2'], // ýükleýjiler
			},
		],
	},
};

Massiw elementlerini setirde ýazmak ýerine, sütünde hem ýazmak bolýar:

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

Tapawutly görnüşli faýllar üçin tapawutly düzgünler ýazyp bolýar:

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

Ýükleýjiler nobat bilen işleýär. Şol ýerde nobat massiwyiň soňundan başlaýar. Ýagny ilkinji bolup massiwyiň iň soňky elementi hökmünde görkezilen ýükleýji işleýär, soňra soňky bolmanda we şuňa meňzeş.