Pada intinya, webpack hanyalah sebuah bundler file. Mempertimbangkan skenario yang sangat sederhana (tanpa pemisahan kode), ini bisa berarti hanya tindakan berikut (pada level tinggi):
- temukan file entri dan muat isinya ke dalam memori
- mencocokkan teks tertentu dalam konten dan mengevaluasinya (misalnya @import)
- temukan dependensi berdasarkan evaluasi sebelumnya dan lakukan hal yang sama dengannya
- menjahit semuanya menjadi satu bundel di memori
- 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.
