Qual è l'ordine del caricatore per il webpack?

Question

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

Ho provato a leggere the source ma anche quando ho trovato il bit che penso implementa il caricamento non riesco a capire come si comporta.

The documentation non menziona come dovrebbe comportarsi quella situazione.

Answer 1

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

e

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

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

Si noti che entro loaders vengono valutati da da destra a sinistra.

Answer 2

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

1.

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

2.

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

3.

caricamento possono essere concatenati. Vengono applicati in una pipeline alla risorsa . Il caricatore finale dovrebbe restituire JavaScript; ogni altro caricatore può restituire l'origine in formato arbitrario, che viene passato a il prossimo caricatore.

Quindi ...

Se avete somefile.css e si passa attraverso loaderOne, loaderTwo, loaderThree è si comporta come una funzione incatenato regolare.

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

significa exactlly lo stesso ...

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

se si proviene da grugnito || gulp world è confuso. Basta leggere l'ordine dei caricatori da destra a sinistra.

Answer 3

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

Diciamo che avete un url-loader nella configurazione con una priorità maggiore rispetto file-loader e che ci piace importare un percorso di immagine con quest'ultimo. Non fare nulla importerebbe il file tramite url-loader (che crea un data-url codificato).

Il prefisso dell'importazione con file-loader! indirizzava l'importazione a tale caricatore.

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