Webpack'теги Loader'лер

Webpack'тин мүмкүнчүлүктөрүн кеңейтүү үчүн loader'лер да колдонулат. Алар белгилүү тилдеги файлдарды алууга жана алар менен белгилүү амалдарды жүргүзүүгө мүмкүнчүлүк берет.

Мисалы, .less кеңейтмеси бар бардык файлдарды алып, алардын текстин CSS'ке айландырып, анан алынган CSS'ти минимизациялоо жана бир жалпы файлга сактоо мүмкүн.

Келгиле, эки элестүү loader'дин мисалында loader менен иштөөнүн жалпы схемасын карап чыгалы.

Биринчи loader'ди орнотолу:

npm install test-loader1 --save-dev

Экинчи loader'ди орнотолу:

npm install test-loader2 --save-dev

Loader'лерди орноткондон кийин, биз аларды конфигурация файлында колдоно алабыз (аларды импорттоо керек эмес). Синтаксисти караңыз:

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.css$/i, // файлдын түрү
				use: ['test-loader1', 'test-loader2'], // loader'лер
			},
		],
	},
};

Массивдин элементтерин сапта эмес, тик тизип жазууга болот:

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'
				],
			},
		],
	},
};

Loader'лер кезек менен аткарылат. Бул учурда кезек массивдин аягынан башталат. Башкача айтканда, биринчи болуп массивдин акыркы элементи катары көрсөтүлгөн loader аткарылат, андан кийин акыркыдан мурункусу жана ушундай эле улантылат.