Loaders no Webpack

Para estender as capacidades do Webpack também são usados loaders. Eles permitem pegar arquivos de um tipo específico e realizar operações específicas com eles.

Por exemplo, você pode pegar todos os arquivos com a extensão .less, transformar seu texto em CSS, depois minimizar o CSS obtido e salvá-lo em um arquivo comum.

Vamos ver o esquema geral de trabalho com um loader usando o exemplo de dois loaders imaginários.

Vamos instalar o primeiro loader:

npm install test-loader1 --save-dev

Vamos instalar o segundo loader:

npm install test-loader2 --save-dev

Após a instalação dos loaders, podemos usá-los no arquivo de configuração (não é necessário importá-los). Veja a sintaxe:

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

Os elementos do array podem ser escritos não em uma linha, mas em uma coluna:

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

Para diferentes tipos de arquivos, você pode escrever regras diferentes:

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

Os loaders são executados em sequência. Sendo que a sequência começa do final do array. Ou seja, o primeiro loader a ser executado é o indicado como último elemento do array, depois o penúltimo e assim por diante.