Wie lautet die Laderbestellung für das Webpack?

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

Ich habe versucht, die Quelle zu lesen, aber selbst als ich das Bit gefunden habe, von dem ich glaube, dass es das Laden implementiert, kann ich nicht verstehen, wie es sich verhält.

In der Dokumentation wird auch nicht erwähnt, wie sich diese Situation verhalten soll.

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

und

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

scheinen gleich zu sein. In funktionaler Hinsicht ist dies dasselbe wie style(css(file))(danke Miguel).

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

Offizielle Dokumentation erklärt es wirklich gut. Leider sind alle notwendigen Informationen in verschiedenen Abschnitten der Dokumentation verteilt. Lassen Sie mich alles zusammenfassen, was Sie wissen müssen.

1.

Stellen Sie sicher, dass sie in der richtigen Reihenfolge sind (von unten nach oben).

2.

Dies sind Funktionen, die die Quelle einer Ressourcendatei als Parameter verwenden und die neue Quelle zurückgeben.

3.

Lader können verkettet werden. Sie werden in einer Pipeline auf die Ressource angewendet. Es wird erwartet, dass der endgültige Lader JavaScript zurückgibt. Jeder andere Loader kann die Quelle in einem beliebigen Format zurückgeben, das an den nächsten Loader übergeben wird.

So...

Wenn Sie somefile.cssund Sie Leiten durch loaderOne, loaderTwo, loaderThreeist , verhält sich wie eine normale Funktion gekettet.

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

bedeutet genau das gleiche wie ...

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

Wenn du vom Grunzen kommst || Schluck Welt ist es verwirrend. Lesen Sie einfach die Reihenfolge der Lader von rechts nach links.

Diese Antwort war hilfreich für mich, aber ich möchte sie um einen weiteren Punkt ergänzen, der sich auf die Laderreihenfolge auswirkt, nämlich den Loadernamen! Ansatz.

Angenommen, Sie haben eine url-loaderin Ihrer Konfiguration mit einer höheren Priorität als file-loaderund möchten mit dieser einen Bildpfad importieren . Wenn Sie nichts tun, wird die Datei über importiert url-loader(wodurch eine codierte Daten-URL erstellt wird).

Wenn Sie dem Import ein Präfix voranstellen, wird der Import file-loader!an diesen Loader weitergeleitet.

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