Loader di Webpack

Untuk memperluas kemampuan Webpack, loader juga digunakan. Mereka memungkinkan untuk mengambil file dengan tipe tertentu dan melakukan operasi tertentu pada file tersebut.

Sebagai contoh, Anda dapat mengambil semua file dengan ekstensi .less, mengubah teksnya menjadi CSS, lalu meminimalkan CSS yang dihasilkan dan menyimpannya dalam satu file umum.

Mari kita lihat skema umum cara bekerja dengan loader menggunakan contoh dua loader imajiner.

Mari instal loader pertama:

npm install test-loader1 --save-dev

Mari instal loader kedua:

npm install test-loader2 --save-dev

Setelah menginstal loader, kita dapat menggunakannya dalam file konfigurasi (tidak perlu mengimpornya). Lihat sintaksnya:

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

Elemen array dapat ditulis tidak dalam satu baris, namun dalam kolom:

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

Untuk tipe file yang berbeda, dapat ditulis aturan yang berbeda:

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

Loader dijalankan secara berurutan. Namun, urutannya dimulai dari akhir array. Artinya, loader yang ditentukan sebagai elemen terakhir array yang dijalankan pertama kali, diikuti oleh elemen kedua dari akhir, dan seterusnya.