Loadery w Webpack

Do rozszerzania możliwości Webpack również używa się loaderów. Pozwalają one brać pliki określonego typu i wykonywać na nich określone operacje.

Na przykład, można wziąć wszystkie pliki z rozszerzeniem .less, przekształcić ich tekst na CSS, następnie otrzymany CSS zminimalizować i zapisać w jeden wspólny plik.

Spójrzmy na ogólny schemat pracy z loaderem na przykładzie dwóch wymyślonych loaderów.

Zainstalujmy pierwszy loader:

npm install test-loader1 --save-dev

Zainstalujmy drugi loader:

npm install test-loader2 --save-dev

Po instalacji loaderów możemy skorzystać z nich w pliku konfiguracyjnym (importować ich nie trzeba). Patrz syntaksa:

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

Elementy tablicy można zapisać nie w linii, a w kolumnę:

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

Dla różnych typów plików można pisać różne reguły:

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 wykonują się po kolei. Przy tym kolejność zaczyna się od końca tablicy. Czyli pierwszym wykonuje się loader, wskazany ostatnim elementem tablicy, potem przedostatnim i tak dalej.