Loaders i Webpack

För att utöka Webpacks möjligheter används också loaders. De gör det möjligt att ta filer av en viss typ och utföra vissa operationer med dem.

Till exempel kan man ta alla filer med filtillägget .less, omvandla deras text till CSS, sedan minimera den resulterande CSS:en och spara den i en gemensam fil.

Låt oss titta på det allmänna schemat för att arbeta med en loader med hjälp av exemplet med två imaginära loaders.

Låt oss installera den första loadern:

npm install test-loader1 --save-dev

Låt oss installera den andra loadern:

npm install test-loader2 --save-dev

Efter installationen av loaders kan vi använda dem i konfigurationsfilen (vi behöver inte importera dem). Se syntaxen:

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

Man kan skriva arrayelementen inte på en rad, utan i en kolumn:

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

För olika filtyper kan man skriva olika regler:

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

Loaders exekveras i ordning. Ordningen börjar från slutet av arrayen. Det betyder att den första loadern som exekveras är den som anges som det sista elementet i arrayen, sedan det näst sista och så vidare.