JavaScript'te Webpack Paketleyicisinin Çalışma Prensibi

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

Bu pek iyi değildir, çünkü birçok 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 kodu tek bir dosyada toplamak gerekir.

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

Ayrı dosyalar ES modülleri olarak temsil edilir. Bu modüller, import komutu aracılığıyla diğer dosyalara bağlanır.

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

Paketleyici, giriş noktasına girer, hangi modüllerin ona bağlı olduğuna bakar. Bu modüllere de diğer modüller bağlanmış olabilir. Paketleyici, 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.

Paketleyici ayrıca derleme modunu ayarlamaya izin verir. 'development' modu geliştirme süreci için tasarlanmıştır. Kodu geliştirme için uygun bir şekilde derler. 'production' modu, çalışmaya konulacak nihai kod için tasarlanmıştır. Bu modda, kod boyutunu küçültmek ve yükleme hızını artırmak için kod minimize edilir.