Webpack-də Loaderlər

Webpack-in imkanlarını genişləndirmək üçün loaderlar da istifadə olunur. Onlar müəyyən tipdə olan faylları götürüb onlarla müəyyən əməliyyatlar yerinə yetirməyə imkan verir.

Məsələn, .less genişləndirməsi olan bütün faylları götürüb, onların mətnini CSS-ə çevirə, sonra alınan CSS-i kiçildə və bir ümumi faylda saxlaya bilərsiniz.

Gəlin iki xəyali loader nümunəsində loaderla işləməyin ümumi sxeminə baxaq.

Gəlin birinci loaderı quraşdıraq:

npm install test-loader1 --save-dev

Gəlin ikinci loaderı quraşdıraq:

npm install test-loader2 --save-dev

Loaderlar quraşdırıldıqdan sonra biz onları konfiqurasiya faylında istifadə edə bilərik (onları import etmək lazım deyil). Sintaksisə baxın:

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

Massiv elementlərini sətirdə deyil, sütunda da yazmaq olar:

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

Müxtəlif tip fayllar üçün müxtəlif qaydalar yazmaq olar:

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

Loaderlar növbə ilə icra olunur. Bu zaman növbə massivin sonundan başlayır. Yəni ilk olaraq massivin sonuncu elementində göstərilən loader icra olunur, sonra ondan əvvəlki və s.