Webpack Derleme Aracının Çalışma Prensibi

Kural olarak, geliştirme sırasında çeşitli kod parçacıkları içeren birçok JavaScript dosyamız olur. Bunlar kendi kodumuzun parçaları veya üçüncü taraf kütüphaneler olabilir. Bu, her bir dosyayı HTML dosyasına script etiketi ile bağlamamız gerektiği anlamına gelir.

Bu çok iyi değildir, çünkü çok sayıda bağlı dosya web sitesinin yükleme hızını yavaşlatır. Bu nedenle, yükleme hızını artırmak için tüm kodun tek bir dosyada toplanması gerekir.

Ancak, kodu tek bir genel dosyada geliştirmek de çok uygun değildir. Bu nedenle, günümüzde şu yaklaşım uygulanmaktadır: kod ayrı dosyalarda geliştirilir ve daha sonra bir derleyici aracılığıyla tek bir genel dosyada toplanır ve bu dosya HTML dosyasına bağlanır.

Ayrı dosyalar, ES modülleridir. Bu modüller, diğer dosyalara import komutuyla bağlanır.

Genellikle, diğer dosyaların bağlandığı bir ana dosya oluşturulur. Bu dosyaya giriş noktası denir.

Derleyici, giriş noktasına girer, ona hangi modüllerin bağlı olduğuna bakar. Bu modüllere de diğer modüller bağlanmış olabilir. Derleyici, tüm bağlantıları takip eder ve tüm kodu tek bir dosyada toplar. Bu dosyaya paket (bundle) denir.

Kural olarak, programcının yazdığı kod src klasöründe bulunur, ve derlenmiş kod dist klasörüne yerleştirilir.