Domanda Qual è l'ordine del caricatore per il 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 la fonte ma anche quando ho trovato il bit che penso implementa il caricamento non riesco a capire come si comporta.

La documentazione non menziona come dovrebbe comportarsi quella situazione.


42
2017-08-26 18:43


origine


risposte:


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

e

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

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

Si noti che all'interno loaders sono valutati da da destra a sinistra.


64
2017-08-26 18:50



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.

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 restituire la nuova fonte.

3.

I caricatori possono essere incatenati. Sono applicati in una conduttura al   risorsa. Il caricatore finale dovrebbe restituire JavaScript; ogni   altro caricatore può restituire l'origine in formato arbitrario, che viene passato a   il prossimo caricatore.

Così...

Se hai somefile.css e tu lo stai passando loaderOne, loaderTwo, loaderThree si comporta come una normale funzione concatenata.

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

significa esattamente lo stesso di ...

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

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


28
2017-08-01 09:30



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

Diciamo che hai un url-loader nella tua configurazione con una priorità più alta di file-loader e ti piacerebbe importa un percorso immagine con quest'ultimo. Non fare nulla importerebbe il file tramite url-loader (che crea un data-url codificato).

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

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

1
2017-09-14 20:54