Apa urutan loader untuk webpack?

Ketika saya memiliki konfigurasi loader dengan beberapa pengujian yang cocok dengan sebuah file, saya hanya mengharapkan loader pertama yang cocok yang akan digunakan, tetapi sepertinya bukan itu masalahnya.

Saya mencoba membaca sumbernya tetapi bahkan ketika saya menemukan bit yang menurut saya menerapkan pemuatan, saya tidak dapat memahami bagaimana perilakunya.

Dokumentasi juga tidak menyebutkan bagaimana situasi itu seharusnya berperilaku.

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

dan

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

tampak sama. Secara fungsi, ini sama dengan style(css(file))(terima kasih Miguel).

Perhatikan bahwa di dalamnya loadersmereka dievaluasi dari kanan ke kiri .

Dokumentasi resmi menjelaskannya dengan sangat baik. Sayangnya semua info yang diperlukan tersebar di bagian dokumentasi yang berbeda. Izinkan saya menyelesaikan semua yang perlu Anda ketahui.

1.

Pastikan urutannya benar (dari bawah ke atas).

2.

Mereka adalah fungsi yang mengambil sumber file sumber daya sebagai parameter dan mengembalikan sumber baru.

3.

Loader bisa dirantai. Mereka diterapkan dalam pipa ke sumber daya. Pemuat akhir diharapkan mengembalikan JavaScript; setiap pemuat lainnya dapat mengembalikan sumber dalam format arbitrer, yang diteruskan ke pemuat berikutnya.

Begitu...

Jika Anda memiliki somefile.cssdan Anda lewat melalui loaderOne, loaderTwo, loaderThreeadalah berperilaku seperti fungsi dirantai biasa.

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

artinya sama persis dengan ...

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

Jika kamu datang dari mendengus || dunia menelan itu membingungkan. Baca saja urutan loader dari kanan ke kiri.

Jawaban ini sangat membantu saya, tetapi saya ingin melengkapi dengan poin lain yang memengaruhi urutan loader, yaitu nama pemuat! pendekatan.

Katakanlah Anda memiliki sebuah url-loaderdi konfigurasi Anda dengan prioritas lebih tinggi daripada file-loaderdan Anda ingin mengimpor jalur gambar dengan yang terakhir. Tidak melakukan apa pun akan mengimpor file melalui url-loader(yang membuat data-url yang dikodekan).

Mengawali impor dengan file-loader!akan mengarahkan impor ke pemuat itu.

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