Webpack-да лоадерҳо

Барои васеъ кардани имкониятҳои Webpack инчунин лоадерҳо истифода мешаванд. Онҳо имкон медиҳанд, ки файлҳои навъи муайянеро гирифта ва амалҳои муайянеро бо онҳо анҷом диҳед.

Масалан, шумо метавонед ҳамаи файлҳоро бо пасванди .less гиред, матни онҳоро ба CSS табдил диҳед, сипас CSS-и бадастомадаро хурд карда ва дар як файли умумӣ захира кунед.

Биёед схемаи умумии кор бо лоадерро ба мисоли ду лоадери тахайюлӣ бубинем.

Биёед лоадери якумро насб кунем:

npm install test-loader1 --save-dev

Биёед лоадери дуюмро насб кунем:

npm install test-loader2 --save-dev

Пас аз насб кардани лоадерҳо мо метавонем онҳоро дар файли конфигуратсия истифода барем (онҳоро ворид кардан лозим нест). Синтаксисро бубинед:

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.css$/i, // навъи файл
				use: ['test-loader1', 'test-loader2'], // лоадерҳо
			},
		],
	},
};

Метавонад элементҳои массивро на сатрӣ, балки сутунӣ навишт:

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

Барои навъҳои гуногуни файлҳо метавонед қоидаҳои гуногун нависед:

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

Лоадерҳо ба тартиб иҷро мешаванд. Дар ин ҳол навбат аз охири массив оғоз мешавад. Яъне аввал лоадери иҷро мешавад, ки ҳамчун унсури охирини массив нишон дода шудааст, баъд пеш аз он ва ғайра.