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.

webpack

— w00t
sumber

Jawaban:

110

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

— Juho Vepsäläinen
sumber

Hmm, perilaku yang tidak terlalu berguna Saya pikir: - / Saya lebih suka menggunakan preLoader untuk perilaku itu ...

— w00t

Loader bertindak seperti fungsi, itulah mengapa dari kanan ke kiri. Ketika Anda menggunakan ini "style!css", bayangkan mereka seperti fungsi: style( css( file ) )... dalam hal cssini dipanggil pertama.

— Miguel Angelo

Mengevaluasi dari KANAN ke KIRI membuat saya kesulitan beberapa saat. @ miguel-angelo style( css( file ) )penjelasan anda melegakan saya.

— Evi Song

KANAN ke KIRI kemungkinan besar pada dasarnya berarti BAWAH ke ATAS, ketika kita melihat Sintaks Webpack 3 ... paling bawah: pertama alias fungsi terdalam ...

— Frank Nocke

Saya tidak tahu kapan ini ditambahkan tetapi akhirnya ada dokumentasi tentang pesanan: webpack.js.org/concepts/loaders/#loader-features Pemuat dapat dirantai. Setiap pemuat dalam rantai menerapkan transformasi ke sumber daya yang diproses. Sebuah rantai dieksekusi dalam urutan terbalik. Pemuat pertama meneruskan hasilnya (sumber daya dengan transformasi yang diterapkan) ke pemuat berikutnya, dan seterusnya. Terakhir, webpack mengharapkan JavaScript dikembalikan oleh loader terakhir dalam rantai.

— Eric Majerus

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.

Pastikan urutannya benar (dari bawah ke atas).

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

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.

— Paweł Grzybek
sumber

Saya memiliki array module.loaders ini, dalam urutan apa mereka mengeksekusi?

— Saras Arya

MENGAPA MEREKA BEBAN BAWAH KE ATAS! ??

— bola lampu

Anda mungkin ingin mengubah jawaban untuk menentukan bahwa "pemuat akhir" dalam dokumentasi ada loaderOnedalam contoh Anda

— aaaaaa

@ bohlam lampu sehingga Anda dapat menambahkan pemuat tambahan dengan mudah .pushke aturan dan tidak perlu khawatir tentang persiapannya.

— Sarke

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'

— E. Sundin
sumber

Ya, meskipun saya suka menghindari itu karena Anda tidak dapat memutuskan pada saat pembuatan apakah file tersebut harus berupa tautan atau disematkan. Anda juga dapat memulai dengan !!melewatkan loader lain BTW…

— w00t