Qual è l'ordine del caricatore per webpack?

Quando ho una configurazione del caricatore con più test che corrispondono a un file, mi aspetto che venga utilizzato solo il primo caricatore corrispondente, ma non sembra essere il caso.

Ho provato a leggere il sorgente ma anche quando ho trovato il bit che secondo me implementa il caricamento non riesco a capire come si comporta.

La documentazione non menziona nemmeno come dovrebbe comportarsi quella situazione.

{
    test: /\.css$/,
    loaders: ['style'],
},
{
    test: /\.css$/,
    loaders: ['css'],
},

e

{
    test: /\.css$/,
    loaders: ['style', 'css'],
},

sembrano essere uguali. In termini di funzionalità, questo è lo stesso di style(css(file))(grazie Miguel).

Notare che all'interno loadersvengono valutati da destra a sinistra .

La documentazione ufficiale lo spiega molto bene. Sfortunatamente tutte le informazioni necessarie sono distribuite in diverse sezioni della documentazione. Fammi concludere tutto ciò che devi sapere.

1.

Assicurati che siano nell'ordine corretto (dal basso verso l'alto).

2.

Sono funzioni che prendono l'origine di un file di risorse come parametro e restituiscono la nuova origine.

3.

I caricatori possono essere concatenati. Vengono applicati in una pipeline alla risorsa. Il caricatore finale dovrebbe restituire JavaScript; ogni altro caricatore può restituire l'origine in un formato arbitrario, che viene passato al caricatore successivo.

Così...

Se si dispone somefile.csse si sta passando attraverso loaderOne, loaderTwo, loaderThreeè si comporta come una funzione incatenato regolare.

{
    test: /\.css$/,
    loaders: ['loaderOne', 'loaderTwo', 'loaderThree']
}

significa esattamente lo stesso di ...

loaderOne(loaderTwo(loaderThree(somefile.css)))

Se vieni da grugnito || gulp world è confuso. Basta leggere l'ordine dei caricatori da destra a sinistra.

Questa risposta mi è stata utile, ma vorrei completare con un altro punto che influisce sull'ordine del caricatore, che è il nome del caricatore! approccio.

Supponiamo che tu abbia un url-loadernella tua configurazione con una priorità più alta di file-loadere desideri importare un percorso immagine con quest'ultima. Non fare nulla importerebbe il file tramite url-loader(che crea un data-url codificato).

Prefissare l'importazione con file-loader!indirizzerebbe l'importazione a quel caricatore.

import image from 'file-loader!./my-img.png'