Webpack bir module bundler'dır. Görevi, birbirinden farklı tüm dosyalarımızı (JS, CSS, JSX, LESS, PNG ve daha fazlası) alıp tek bir dosyaya dönüştürmektir. Paketlemenin iki önemli avantajı vardır: modülerlik ve ağ performansı.
Modülerlik, kaynak kodumuzu parçalara veya modüllere ayırmamıza olanak tanıyarak ekipte çalışanların işini kolaylaştırır.
Ağ performansını iyileştirmek için tarayıcımızda yalnızca tek bir dependency yüklememiz yeterlidir; bu nedenle dosyalarımızı tek bir bundle'da toplarız. Her script etiketi bir HTTP isteği oluşturur ve her istek belirli bir gecikme maliyeti getirir. Dolayısıyla modüllerimizi tek bir bundle'da birleştirmek, her şeyi tek bir istekle yüklememize ve ek gecikmeden kaçınmamıza olanak tanır.
Webpack, Bundling Dışında Bize Neler Sunar?
Code Splitting: Kodumuzu parçalara ayırmamıza olanak tanır.
Minification: Boşlukları, satır sonlarını, gereksiz kodları ve uzun variable adlarını kaldırarak dosya boyutunu azaltır.
Hot Module Replacement: Kaynak koddaki değişiklikleri izleyerek yalnızca güncellenen modülleri değiştirir.
Hız: Uygulamanın modüllerini ve dependency'lerini tek bir pakette birleştirmek yükleme hızını artırır.
Modülerlik: Projeyi modüllere ayırıp export/import yapısını kullanarak bu modülleri projenin farklı bölümlerinde kullanmamıza olanak tanır.
Composition: Modüller sayesinde uygulamamızda küçük, yeniden kullanılabilir ve kolayca test edilebilir component'ler oluşturup bunları bir araya getirebiliriz.
Feature Flagging: Özellikler test edilirken kodu bir veya daha fazla ortama gönderir.
Tutarlılık: Webpack, Babel ESNext syntax'ını desteklediği için en yeni JavaScript özelliklerini compile edip kullanabilirsiniz.