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

Жүктеуіштер кезекпен орындалады. Бұл ретте кезек массивтің соңынан басталады. Яғни, бірінші болып массивтің соңғы элементі ретінде көрсетілген жүктеуіш орындалады, содан кейін соңғыдан бір бұрынғы және т.б.