Loadery ve Webpacku

Pro rozšíření možností Webpacku se také používají loadery. Umožňují vzít soubory určitého typu a provádět s nimi určité operace.

Například lze vzít všechny soubory s příponou .less, transformovat jejich text do CSS, poté získané CSS minimalizovat a uložit do jednoho společného souboru.

Podívejme se na obecné schéma práce s loaderem na příkladu dvou imaginárních loaderů.

Nainstalujme první loader:

npm install test-loader1 --save-dev

Nainstalujme druhý loader:

npm install test-loader2 --save-dev

Po instalaci loaderů je můžeme použít v konfiguračním souboru (není třeba je importovat). Podívejte se na syntaxi:

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

Prvky pole lze zapsat ne do řádku, ale do sloupce:

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

Pro různé typy souborů lze psát odlišná pravidla:

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

Loadery se vykonávají postupně. A to fronta začíná od konce pole. To znamená, že první se vykoná loader, zadaný jako poslední prvek pole, poté předposlední a tak dále.