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.

webpack

— w00t
quelle

Antworten:

106

{
    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 .

— Juho Vepsäläinen
quelle

Hmm, nicht sehr nützliches Verhalten Ich denke: - / Ich würde lieber PreLoader für dieses Verhalten verwenden ...

— w00t

Lader verhalten sich wie Funktionen, deshalb von rechts nach links. Wenn Sie dies verwenden "style!css", stellen Sie sie sich wie Funktionen vor: style( css( file ) )... wird in diesem Fall csszuerst aufgerufen.

— Miguel Angelo

Die Bewertung von RECHTS nach LINKS brachte mich eine Weile in Schwierigkeiten. @ Miguel-Angelo Ihre style( css( file ) )Erklärung ist eine Erleichterung für mich.

— Evi Song

RECHTS NACH LINKS bedeutet höchstwahrscheinlich im Wesentlichen UNTEN nach OBEN, wenn wir uns die Webpack 3-Syntax ansehen ... ganz unten: erste alias innerste Funktion ...

— Frank Nocke

Ich weiß nicht, wann dies hinzugefügt wurde, aber es gibt endlich eine Dokumentation über die Bestellung: webpack.js.org/concepts/loaders/#loader-features Lader können verkettet werden. Jeder Loader in der Kette wendet Transformationen auf die verarbeitete Ressource an. Eine Kette wird in umgekehrter Reihenfolge ausgeführt. Der erste Loader gibt sein Ergebnis (Ressource mit angewendeten Transformationen) an das nächste weiter und so weiter. Schließlich erwartet Webpack, dass JavaScript vom letzten Lader in der Kette zurückgegeben wird.

— Eric Majerus

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.

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

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

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.

— Paweł Grzybek
quelle

Ich habe dieses Array von module.loaders. In welcher Reihenfolge werden sie ausgeführt?

— Saras Arya

WARUM LADEN SIE UNTEN NACH OBEN?

— light24bulbs

Möglicherweise möchten Sie die Antwort ändern, um anzugeben, dass sich "Final Loader" in der Dokumentation loaderOnein Ihrem Beispiel befindet

— aaaaaa

@ light24bulbs, damit Sie zusätzliche Lader mit einem einfachen .pushzu den Regeln hinzufügen können und sich nicht darum kümmern müssen, sie voranzustellen.

— Sarke

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'

— E. Sundin
quelle

Ja, obwohl ich das gerne vermeiden möchte, da Sie dann beim Erstellen nicht entscheiden können, ob die Datei ein Link oder eingebettet sein soll. Sie können auch damit beginnen !!, andere Lader zu überspringen.

— Übrigens