Loader dalam Webpack

Untuk mengembangkan keupayaan Webpack, loader juga digunakan. Ia membenarkan pengambilan fail jenis tertentu dan melakukan operasi tertentu ke atasnya.

Sebagai contoh, anda boleh mengambil semua fail dengan sambungan .less, mengubah teksnya kepada CSS, kemudian meminimumkan CSS yang diperoleh dan menyimpannya dalam satu fail umum.

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

Mari pasang loader pertama:

npm install test-loader1 --save-dev

Mari pasang loader kedua:

npm install test-loader2 --save-dev

Selepas pemasangan loader, kami boleh menggunakannya dalam fail konfigurasi (tidak perlu diimport). Lihat sintaks:

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

Elemen array boleh ditulis bukan dalam satu baris, tetapi dalam lajur:

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

Untuk jenis fail yang berbeza, anda boleh menulis peraturan yang berbeza:

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 dilaksanakan mengikut urutan. Urutan bermula dari akhir array. Iaitu, loader yang dinyatakan sebagai elemen terakhir array dijalankan terlebih dahulu, diikuti oleh yang kedua terakhir dan seterusnya.