Was ist die Laderbestellung für das Webpack?

Question

Wenn ich eine Loader-Konfiguration mit mehreren Tests habe, die zu einer Datei passen, würde ich erwarten, dass nur der erste passende Loader verwendet wird, aber das scheint nicht der Fall zu sein.

Ich versuchte zu lesen the source aber auch wenn ich das Bit fand, das ich denke, implementiert das Laden kann ich nicht verstehen, wie es sich verhält.

The documentation erwähnt nicht, wie sich diese Situation auch verhalten sollte.

Answer 1

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

und

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

erscheinen gleich sein. In Funktion ausgedrückt, das ist das gleiche wie style(css(file)) (Danke Miguel).

Beachten Sie, dass innerhalb loaders sie von rechts nach links ausgewertet werden.

Answer 2

Offizielle Dokumentation erklärt es wirklich gut. Leider sind alle notwendigen Informationen in verschiedenen Abschnitten der Dokumentation verteilt. Lass mich alles einpacken, was du wissen musst.

1.

Sicherstellen, daß sie in der richtigen Reihenfolge (von unten nach oben) sind.

2.

Sie sind Funktionen, die die Quelle einer Ressourcendatei als Parameter übernehmen und die neue Quelle zurückzukehren.

3.

Lader können verkettet werden. Sie werden in einer Pipeline auf die Ressource angewendet. Der letzte Loader soll JavaScript zurückgeben; jeder anderen Lader kann Quelle in beliebigem Format zurückgeben, die an der nächste Lader übergeben wird.

So ...

Wenn Sie somefile.css haben, und Sie sind Leiten durch loaderOne, loaderTwo, loaderThree ist, verhält sich wie eine normale Funktion gekettet.

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

bedeutet exactlly das gleiche wie ...

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

Wenn Sie von Grunzen kommen || Schluck Welt ist es verwirrend. Lesen Sie einfach Lader von rechts nach links.

Answer 3

Diese Antwort war hilfreich für mich, aber ich möchte mit einem anderen Punkt ergänzen, der Lader Reihenfolge betrifft, die loadername! Ansatz ist.

Angenommen, Sie haben ein url-loader in der Config mit einer höheren Priorität als file-loader und Sie möchten Import ein Bild Pfad mit letzterem. Wenn Sie nichts tun, wird die Datei über url-loader importiert (wodurch eine codierte Daten-URL erstellt wird).

Wenn Sie den Import mit file-loader! vorfixieren, wird der Import an diesen Loader weitergeleitet.

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