Loaders en Webpack

Para ampliar las capacidades de Webpack también se utilizan loaders. Permiten tomar archivos de un tipo específico y realizar con ellos operaciones específicas.

Por ejemplo, se pueden tomar todos los archivos con extensión .less, transformar su texto a CSS, luego minimizar el CSS obtenido y guardarlo en un archivo común.

Veamos el esquema general de trabajo con un loader usando el ejemplo de dos loaders imaginarios.

Instalemos el primer loader:

npm install test-loader1 --save-dev

Instalemos el segundo loader:

npm install test-loader2 --save-dev

Después de instalar los loaders, podemos utilizarlos en el archivo de configuración (no es necesario importarlos). Vea la sintaxis:

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

Los elementos del array se pueden escribir no en una línea, sino en una columna:

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

Para diferentes tipos de archivos se pueden escribir diferentes reglas:

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

Los loaders se ejecutan en secuencia. Y la secuencia comienza desde el final del array. Es decir, primero se ejecuta el loader especificado como el último elemento del array, luego el penúltimo y así sucesivamente.