webpackのローダーの注文は何ですか？

ファイルに一致する複数のテストを含むローダー構成がある場合、最初に一致するローダーのみが使用されることを期待しますが、そうではないようです。

ソースを読んでみましたが、ロードを実装していると思うビットを見つけても、それがどのように動作するのか理解できません。

ドキュメントには、その状況がどのように動作するかについても記載されていません。

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

そして

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

等しいように見えます。機能的には、これはstyle(css(file))（Miguelに感謝）と同じです。

loadersそれらの中で右から左に評価されることに注意してください。

公式ドキュメントはそれを本当によく説明しています。残念ながら、必要な情報はすべて、ドキュメントのさまざまなセクションに分散しています。あなたが知る必要があるすべてをまとめさせてください。

1.1。

それらが正しい順序（下から上）であることを確認してください。

2.2。

これらは、リソースファイルのソースをパラメーターとして受け取り、新しいソースを返す関数です。

3.3。

ローダーはチェーン接続できます。それらはパイプラインでリソースに適用されます。最終的なローダーはJavaScriptを返すことが期待されています。他の各ローダーは、次のローダーに渡される任意の形式でソースを返すことができます。

そう...

あなたが持っている場合somefile.css、あなたはそれを通過しているloaderOne、loaderTwo、loaderThree定期的な連鎖機能のような振る舞いです。

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

とまったく同じ意味です...

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

あなたがうなり声から来ているなら|| 混乱している一口の世界。ローダーの順序を右から左に読むだけです。

この回答は私には役立ちましたが、ローダーの順序に影響を与える別のポイントであるローダー名を補足したいと思います。アプローチ。

あなたが持っていると言うurl-loaderよりも優先して、あなたの設定ではfile-loader、あなたがしたい画像のパスをインポートし、後者で。何もしないと、url-loader（エンコードされたデータURLが作成される）を介してファイルがインポートされます。

インポートの前にを付けるとfile-loader!、インポートがそのローダーに送られます。

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