Webpack Giriş ve Temel Bilgiler

Bu video, frontend geliştirmede önemli bir araç olan Webpack'in ne olduğunu, neden kullanıldığını ve çalışma prensiplerini ele alıyor.

Webpack Nedir ve Neden Kullanılır? (0:00 - 2:45)

Tarayıcılar doğrudan gelişmiş kütüphane ve araçlardan (React, Angular, SASS gibi) anlamaz; sadece HTML, CSS ve JavaScript tanır. Webpack, bu karmaşık yapıları optimize ederek tarayıcının anlayabileceği performanslı dosyalara dönüştüren bir modül paketleyicidir.

Çalışma Mantığı (2:45 - 4:00)

Webpack süreci 5 ana adımdan oluşur:

1. Giriş Noktası (Entry Point): Uygulamanın nereden başlayacağını belirler.
2. Bağımlılık Diyagramı: Modüller arasındaki ilişkileri (import/export) tarayarak bir grafik oluşturur.
3. Yükleyiciler (Loaders): JavaScript dışındaki dosya türlerini (CSS, görseller, vb.) işlenebilir hale getirir.
4. Eklentiler (Plugins): Derleme sürecine müdahale ederek ek optimizasyonlar sağlar.
5. Çıktı (Bundle): Tüm modülleri birleştirip optimize edilmiş nihai paketleri oluşturur.

Webpack Alternatifleri (4:00 - 6:35)

Videoda diğer popüler araçlara da kısaca değiniliyor:

• Vite: Modern projeler için hızlı geliştirme döngüsü sunar.
• Parcel: Sıfıra yakın yapılandırma ile kolay kullanım sağlar.
• Rollup: Özellikle kütüphane geliştirmede, gereksiz kodları temizleme (tree-shaking) konusunda çok başarılıdır.