Webpack'ta Yükleyiciler

Webpack'in yeteneklerini genişletmek için yükleyiciler de kullanılır. Bunlar, belirli türdeki dosyaları alıp onlarla belirli işlemler yapmaya olanak tanır.

Örneğin, .less uzantılı tüm dosyaları alıp, metinlerini CSS'e dönüştürebilir, ardından elde edilen CSS'i minimize edip tek bir ortak dosyada kaydedebilirsiniz.

Hayali iki yükleyici örneğinde bir yükleyiciyle çalışmanın genel şemasına bir göz atalım.

İlk yükleyiciyi kuralım:

npm install test-loader1 --save-dev

İkinci yükleyiciyi kuralım:

npm install test-loader2 --save-dev

Yükleyicileri kurduktan sonra, yapılandırma dosyasında kullanabiliriz (onları içe aktarmaya gerek yok). Sözdizimine bakın:

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

Dizi elemanlarını satır yerine sütun halinde de yazabilirsiniz:

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

Farklı dosya türleri için farklı kurallar yazılabilir:

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

Yükleyiciler sırayla çalıştırılır. Bu sıra dizinin sonundan başlar. Yani ilk olarak, dizinin son elemanı olarak belirtilen yükleyici çalıştırılır, ardından sondan bir önceki ve bu şekilde devam eder.