Loader in Webpack

Per estendere le capacità di Webpack si utilizzano anche i loader. Permettono di prendere file di un tipo specifico ed eseguire su di essi determinate operazioni.

Ad esempio, è possibile prendere tutti i file con estensione .less, trasformare il loro testo in CSS, poi minimizzare il CSS ottenuto e salvarlo in un unico file comune.

Diamo un'occhiata allo schema generale di lavoro con un loader usando l'esempio di due loader immaginari.

Installiamo il primo loader:

npm install test-loader1 --save-dev

Installiamo il secondo loader:

npm install test-loader2 --save-dev

Dopo aver installato i loader, possiamo utilizzarli nel file di configurazione (non è necessario importarli). Guardate la sintassi:

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

Gli elementi dell'array possono essere scritti non in linea, ma in colonna:

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

Per diversi tipi di file si possono scrivere regole diverse:

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

I loader vengono eseguiti in sequenza. La sequenza inizia dalla fine dell'array. Cioè, viene eseguito per primo il loader specificato come ultimo elemento dell'array, poi il penultimo e così via.