Laaiers in Webpack

Om Webpack se vermoëns uit te brei word laaiers ook gebruik. Hulle laat toe om lêers van 'n sekere tipo te neem en sekere operasies daarmee uit te voer.

Byvoorbeeld, jy kan alle lêers met die uitbreiding .less neem, hul teks na CSS omskep, dan die verkrygde CSS minimeer en in een algemene lêer stoor.

Laat ons kyk na die algemene skema vir werk met 'n laaier aan die hand van die voorbeeld van twee denkbeeldige laaiers.

Laat ons die eerste laaier installeer:

npm install test-loader1 --save-dev

Laat ons die tweede laaier installeer:

npm install test-loader2 --save-dev

Na die installering van die laaiers kan ons hulle gebruik in die konfigurasielêer (om hulle in te voer is nie nodig nie). Kyk na die sintaksis:

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

Die elemente van die skikking kan nie in 'n string geskryf word nie, maar in 'n kolom:

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

Vir verskillende tipes lêers kan jy verskillende reëls skryf:

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

Laaiers word een vir een uitgevoer. Die volgorde begin egter van die einde van die skikking af. Dit beteken die laaier wat aangedui is as die laaste element van die skikking word eerste uitgevoer, dan die voorlaaste, en so meer.