Webpack Nedir? Modern JavaScript Paketleyici Ekosistemi

⚠️ Önemli Güncelleme (2026): Webpack, web geliştirme dünyasının en köklü modül paketleme aracı olsa da artık yerini çok daha hızlı ve modern alternatiflere bırakmıştır. Eğer yeni bir projeye başlıyorsanız veya modern paketleme standartlarını öğrenmek istiyorsanız, bu makaleden önce günümüzün popüler çözümü olan Vite Nedir? Modern Web Geliştirme ve Paketleme Aracı başlıklı yazımı okumanızı tavsiye ederim.

💡 Özet (TL;DR):
Webpack Nedir?: JavaScript ve web kaynaklarını (CSS, resimler vb.) tek veya parçalı çıktılar halinde bir araya getiren en köklü statik modül paketleyicisidir.
Evrim: Günümüzde yeni projelere başlarken manuel Webpack kurulumu yerine genellikle Vite, esbuild veya Webpack uyumlu Rust tabanlı Rspack tercih edilmektedir.
Kritik Hata: Webpack asla global (npm i -g) olarak kurulmamalıdır; sürüm çakışmalarını önlemek için her zaman proje düzeyinde yerel (devDependencies) olarak kurulmalıdır.

Web uygulamalarının gelişmesiyle birlikte bir JavaScript ve bir CSS dosyası dahil edilerek hazırlanan sayfalar büyük oranda geçmişte kaldı. Eskiden sadece yardımcı olarak kullandığımız bu elemanların ağırlığı arttıkça ana bileşen haline geldiler; haliyle birçok harici kütüphane ve eklenti de projelerimize dahil olmaya başladı. Projeler karmaşıklaştıkça kodlama, konfigürasyon, yönetim ve dosya boyutları da sorun haline gelmeye başladı.

Bu yazıda JavaScript, CSS (Sass, Less vb. dahil) ağırlıklı web veya mobil uygulama geliştirenlerin öğrenmek için harcayacakları zamanın katbekat fazlasını kazanacakları, bunun dışında sağladığı fayda ve fonksiyonlarla kodlama deneyiminizi ve kalitesini bir üst seviyeye taşıyacak bir araçtan, Webpack'ten bahsetmek istiyorum.

Modern Paketleyiciler ve Karşılaştırma

Paketleyici	Altyapı Dili	Geliştirme Hızı	En İyi Kullanım Alanı	Webpack Uyumluluğu
Webpack	JavaScript	Yavaş / Orta	Büyük, karmaşık eski projeler	Kendisi
Vite	JS + Go (esbuild)	Çok Hızlı (ESM tabanlı)	Modern React, Vue, Svelte	Düşük (Farklı eklenti sistemi)
Rspack	Rust	Son Derece Hızlı	Webpack projelerini hızlandırma	Çok Yüksek (Drop-in replacement)
esbuild	Go	Son Derece Hızlı	Hızlı derleme, basit paketleme	Yok

Webpack Nedir? Neden Webpack?

Webpack, JavaScript uygulamaları için statik bir modül paketleyicisidir. Yazdığınız kodu, kullandığınız tüm bileşenleri ve kütüphaneleri alır, sizin isteğinize göre tek veya parçalı olarak bir araya getirir. Kodunuzu yönetmek, hata ayıklamak ve test etmek daha kolay hale gelirken, tarayıcı tarafındaki yönetimini de kolaylaştırır.

Eğer sadece form kontrolü veya sayfa açıldığında birkaç görsel ayar yapan basit betikler kullanacaksanız Webpack sizin için pek önemli olmayabilir; ancak JavaScript ağırlıklı çalışıyorsanız Webpack sizin için oyunu tamamen değiştirecektir.

Webpack Hangi Faydaları Sağlıyor?

Bağımlılık Yönetimi (Dependency Management)

Sayfanızda değişik amaçlarla farklı kütüphaneler ve eklentiler kullanıyor ve bunları <script> etiketi ile teker teker çağırıyor musunuz? Bunun yerine bu kütüphaneleri npm kullanarak projenize dahil edip, sadece bu kütüphaneleri kullandığınız modüller içerisine otomatik olarak alabilirsiniz. Sayfanızda sadece çıktı dosyalarını dahil edip, bütün yönetimi Webpack ile yapabilirsiniz.

Küçülen Dosya Boyutları, Artan Hız

Webpack ile kullanacağınız çeşitli eklentilerle JavaScript ve CSS dosyalarınızı otomatik olarak küçültebilir (minification), karartabilir (obfuscation) ve hatta kodunuz veya HTML şablonlarınız içinde kullanılmayan CSS tanımlamalarının gereksiz yere dışarıya aktarılmasını engelleyebilirsiniz. Webpack hem dosya boyutlarını küçültecek hem de onlarca farklı dosya yüklenerek sunucu yükünün artmasının önüne geçecektir.

Dinamik Yükleme (Code Splitting)

Dilediğiniz modülleri varsayılan olarak yüklerken, dilediğiniz modülleri sadece gerektiğinde (on-demand) yükleyebilirsiniz. Kullandığınız bir kütüphane veya yazdığınız bir modül sadece bazı sayfalarda ve hatta sadece kullanıcı isteğine bağlı olarak bazı durumlarda yükleniyorsa, kodun bu bölümünü sadece gerektiğinde indirtebilirsiniz.

Webpack Nasıl Kurulur ve Kullanılır?

Webpack'i Yarn veya npm paket yöneticileri ile kurabilirsiniz.

⚠️ Önemli Güvenlik ve Uyum Uyarısı: Eski kaynaklarda Webpack'in global olarak (-g parametresiyle) kurulması önerilmektedir. Ancak bu, projeler arası sürüm uyuşmazlıklarına yol açtığı için modern standartlarda kesinlikle önerilmez. Her zaman proje düzeyinde yerel kurulum yapmalısınız.

Yerel Kurulum

Proje klasörünüzün terminalinde aşağıdaki komutu çalıştırarak Webpack'i geliştirme bağımlılığı olarak kurun:

npm install webpack webpack-cli --save-dev

Kurulumu yaptıktan sonra projenizin package.json dosyasına build scriptini ekleyin:

{
  "scripts": {
    "build": "webpack"
  }
}

Böylece paket yöneticiniz build komutu verildiğinde derlemeyi Webpack ile yapması gerektiğini bilecektir.

Webpack Konfigürasyonu

Webpack 4 ve 5 sürümleriyle birlikte aşağıdaki varsayılan şartlara uymak kaydıyla herhangi bir ayarlama yapmadan sıfır yapılandırmayla (zero-config) kullanılabilir:

Uygulamanızın başlangıç noktası (entry point) ./src/index.js olmalıdır.
Çıktı dosyası ./dist/main.js olacaktır.

Dilerseniz konfigürasyonu kendiniz de yapabilirsiniz. Konfigürasyon dosyası temel olarak proje kök dizininde webpack.config.js adıyla yer almalıdır. Maalesef bu yazıda tüm konfigürasyon detaylarına giremeyeceğiz. Genel olarak bir konfigürasyon dosyasında bundan sonraki bölümde belirtilen bileşenlerin ayarları yapılır.

Webpack'in Temel Bileşenleri

Webpack beş ana bileşenle özetlenebilir:

Giriş (Entry): Uygulamanın başlangıç noktasıdır. Webpack'in ilk işleme alacağı modüldür. Giriş dosyasında çağrılan diğer dosyaları bağımlılık listesine ekler ve bu bağımlılık listesini genişletir.
Çıktı (Output): Webpack tarafından işlenen dosyaların, belirlediğiniz kurallar dahilinde nereye yazılacağını belirler. Varsayılan olarak projenin tamamı ./dist/main.js dosyasına kaydedilir.
Yükleyiciler (Loaders): Webpack varsayılan olarak sadece .js ve .json dosyalarını tanır. .css, .ts, .sass veya görseller gibi farklı dosya tiplerini projeye dahil etmek için yükleyiciler (loaders) kullanmanız gerekir (Örn: css-loader, sass-loader).
Eklentiler (Plugins): Yükleyiciler ile gerçekleştirilemeyecek daha geniş kapsamlı işlemleri yapmak için kullanılır. Örneğin çıktı dosyalarını sıkıştırmak, gereksiz CSS'leri temizlemek (PurgeCSS) veya derlemeden önce çıktı klasörünü temizlemek gibi işlemler eklentilerle yapılır.
Mod (Mode): development veya production gibi ortam tanımlamaları yaparak Webpack'in uygulamanızı derlerken hangi optimizasyonları yapacağını belirler. Örneğin çıktı dosyalarını küçültmek üretim (production) ortamında otomatik olarak yapılır.

Sonsöz ve Modern Dönüşüm

Webpack, web geliştirme dünyasında standartları belirleyen efsanevi bir araçtır. Ancak günümüzde web ekosisteminin büyümesi ve dosyaların artmasıyla birlikte JavaScript tabanlı Webpack derleme hızları yavaş kalmaya başlamıştır. Günümüz projelerinde, Webpack'in yerini çok daha hızlı çalışan Vite ve Rust tabanlı paketleyiciler almaktadır.

Eğer sıfırdan bir projeye başlıyorsanız, geleneksel Webpack yapılandırmalarıyla vakit kaybetmek yerine yeni nesil Vite gibi modern araçları incelemenizi öneririm.

Bu Yazıda Yapılan Değişiklikler

21.06.2026: Webpack makalesi güncel derleyici ekosistemi (Vite, Rspack, esbuild) doğrultusunda güncellendi. Global kurulum önerisi yerel geliştirme standartlarıyla düzeltildi.
11.05.2022: Yazı özeti düzenlendi.