Pemuat webpack vs plugin; apa bedanya?

Apa perbedaan antara loader dan plugin di webpack?

The dokumentasi untuk plugin hanya mengatakan:

Gunakan plugin untuk menambahkan fungsionalitas yang biasanya terkait dengan bundel di webpack.

Saya tahu bahwa babel menggunakan loader untuk transformasi jsx / es2015, tetapi sepertinya tugas umum lainnya (copy-webpack-plugin, misalnya) menggunakan plugin sebagai gantinya.

Loader melakukan transformasi pra-pemrosesan dari hampir semua format file saat Anda menggunakan sth seperti require("my-loader!./my-awesome-module")di kode Anda. Dibandingkan dengan plugin, plugin ini cukup sederhana karena (a) hanya menampilkan satu fungsi ke webpack dan (b) tidak dapat memengaruhi proses build yang sebenarnya.

Plugin di sisi lain dapat berintegrasi secara mendalam ke dalam webpack karena mereka dapat mendaftarkan hook dalam sistem build webpacks dan mengakses (dan memodifikasi) kompiler, dan cara kerjanya, serta kompilasi. Oleh karena itu, mereka lebih kuat, tetapi juga lebih sulit untuk dipertahankan.

Menambahkan jawaban yang komplementer dan sederhana.

Pemuat:

Loader bekerja pada tingkat file individu selama atau sebelum itu bundel yang dihasilkan.

Plugin:

Plugin bekerja pada tingkat bundel atau potongan dan biasanya bekerja pada akhir proses pembuatan bundel. Plugin juga dapat memodifikasi bagaimana bundel itu dibuat. Plugin memiliki kontrol yang lebih kuat daripada loader.

Sebagai contoh, Anda dapat dengan jelas melihat di gambar di bawah ini di mana loader bekerja dan di mana plugin bekerja -

Referensi: Artikel dan Gambar

Pada intinya, webpack hanyalah sebuah bundler file. Mempertimbangkan skenario yang sangat sederhana (tanpa pemisahan kode), ini bisa berarti hanya tindakan berikut (pada level tinggi):

1. temukan file entri dan muat isinya ke dalam memori
2. mencocokkan teks tertentu dalam konten dan mengevaluasinya (misalnya @import)
3. temukan dependensi berdasarkan evaluasi sebelumnya dan lakukan hal yang sama dengannya
4. menjahit semuanya menjadi satu bundel di memori
5. tulis hasilnya ke sistem file

Ketika Anda memeriksa langkah-langkah di atas dengan cermat, ini beresonansi dengan apa yang dilakukan oleh compiler Java (atau compiler lainnya). Ada perbedaan tentu saja, tetapi itu tidak masalah untuk memahami loader dan plugin.

Pemuat:

ada di sini karena webpack berjanji untuk menggabungkan semua jenis file.

Karena webpack pada intinya hanya cukup mampu untuk memaketkan file js, janji ini berarti bahwa tim inti webpack harus menggabungkan aliran build yang memungkinkan kode eksternal untuk mengubah jenis file tertentu dengan cara yang dapat digunakan oleh webpack.

Kode eksternal ini disebut loader dan biasanya dijalankan selama langkah 1 dan 3 di atas. Jadi, karena tahap di mana loader ini perlu dijalankan sudah jelas, mereka tidak memerlukan hook dan juga tidak memengaruhi proses build (karena build atau bundle hanya terjadi pada langkah 4).

Jadi Loader mempersiapkan panggung untuk kompilasi dan mereka semacam memperluas fleksibilitas kompiler webpack.

Plugin:

ada di sini karena meskipun webpack tidak secara langsung menjanjikan output variabel, dunia menginginkannya dan webpack mengizinkannya.

Karena webpack pada intinya hanyalah sebuah bundler namun melalui beberapa langkah dan sub-langkah dalam melakukannya, langkah-langkah ini dapat digunakan untuk membangun fungsionalitas tambahan.

Proses pembuatan produksi (mengecilkan dan menulis ke sistem file), yang merupakan kemampuan asli kompiler webpack, misalnya, dapat diperlakukan sebagai perpanjangan dari kemampuan intinya (yang hanya berupa bundling) dan dapat diperlakukan seperti plugin asli. Jika mereka tidak menyediakannya, orang lain akan melakukannya.

Melihat native plugin di atas, sepertinya webpack bundling atau kompilasi dapat dipecah menjadi core bundling process, ditambah banyak proses native plugin yang bisa kita matikan atau sesuaikan atau perpanjang. Ini berarti mengizinkan kode eksternal untuk bergabung dalam proses bundling pada titik-titik tertentu yang dapat mereka pilih (disebut hook).

Oleh karena itu plugin mempengaruhi keluaran dan semacam memperluas kemampuan kompiler webpack.

Loader bekerja pada tingkat file . Mereka dapat menulis template, memproses beberapa kode untuk ditranspilasikan tergantung pada kenyamanan Anda, dll.

Plugin bekerja di tingkat sistem . Mereka dapat mengerjakan pola, penanganan sistem file (nama, jalur), dll.