Web uygulamalarının gelişmesi ile birlikte bir javascript ve bir css dosyası dahil ederek 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 kompleksleştikçe, 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 kat ve kat fazlasını kazanacakları, bunun dışında sağladığı fayda ve fonksiyonlarla kodlama deneyiminiz ve kalitesini bir üst seviyeye taşıyacak bir araçtan, webpack’den bahsetmek istiyorum.

Webpack’i aşağıdaki başlıklar altında inceleyeceğim;

  1. Webpack nedir? – Neden Webpack?
  2. Webpack hangi faydaları sağlıyor?
  3. Webpack nasıl kurulur ve kullanılır?
  4. Webpack’in temel bileşen ve özellikleri nelerdir?

Webpack Nedir? Neden Webpack?

Webpack javascript uygulamaları için statik bir modül paketleyicisidir. (Javascript’de modüller başlıklı yazımdan javascript modülleri hakkında daha fazla bilgi edinebilirsiniz.) 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 scriptler kullanacaksanız webpack sizin için pek önemli olmayabilir, ama 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), karmaşıklaştırabilir (obsufication) 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.

Sadece gerektiğinde yükleme olanağı

Dilediğiniz modülleri varsayılan olarak yüklerken, dilediğiniz modülleri sadece gerektiğinde 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. Paket yöneticileri başlı başına bir konu olduğu için bu konuda ayrı bir yazı yazacağım. Ben NPM kullanmayı tercih ettiğim için aşağıdaki komutla global olarak kurulumunu yaptım;

#Global kurulum
npm i -g webpack webpack-cli

#Yerel (Lokal) kurulum
npm i webpack webpack-cli --save-dev

Kurulumu yaptıktan sonra projenizin package.json dosyasına şunu ekleyin

{
  //…
  "scripts": {
     "build": "webpack"
   }
 }

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

Webpack konfigürasyonu

Webpack 4 versiyonu ile birlikte aşağıdaki şartlara uymak kaydıyla herhangi bir ayarlama yapmadan kullanılabilir;

  • uygulamanızın başlangıç noktası (entry point) ./src/index.js olmalıdır.
  • çıktı dosya ./dist/main.js olacaktır
  • Webpack “production” ortamında çalışacaktır.

Dilerseniz konfigürasyonu (eski sürümlerde olduğu gibi) kendinizde yapabilirsiniz. Konfigürasyon dosyası temel olarak proje kök dizininde webpack.config.js içerisinde yer almalıdır. Fakat konfigürasyonu belirli klasörler ve dosyalar içine dağıtabilir, koşullu konfigürasyon dosyaları oluşturabilirsiniz. Malesef bu yazıda konfigürasyon detaylarına da giremeyeceğim. Genel olarak bir konfigürasyon dosyasında bundan sonraki bölümde belirtilen bileşenlerin ayarları yapılır.

Webpack’in temel bileşen ve özellikleri nelerdir?

Webpack 5 ana bileşenle özetlenebilir. Bunlar;

  • Giriş (Entry)
  • Çıktı (Output)
  • Yükleyiciler (Loaders)
  • Eklentiler (Plugins)
  • Mod (Mode)

Giriş (Entry) uygulamanın başlangıç noktasıdır. Webpack’in ilk işleme alacağı modüldür (javascript dosyasıdır) Webpack giriş dosyasında çağırılan diğer dosyalar bağımlılık listesine ekler ve daha sonra teker teker bunları da işleme alarak bu bağımlılık listesini genişletir. Sonuçta bütün kod ve modüller istenen şekilde paketlenecektir.

Birden fazla giriş noktası tanımlayarak her birinin ayrı ayrı işlenmesi de mümkündür. Bu durumda her giriş noktası için farklı bir bağımlılık listesi oluşturulur. Kod tekrarını en aza indirip, ortak kodlar da kullanarak farklı çıkış dosyaları oluşturmanızı sağlar.

Çı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 kaydedilirken, hash veya yığın (chunk) isimleri ile dinamik olarak isimlendirilip parçalara da ayrılabilir.

Webpack varsayılan olarak sadece .js ve .json dosyaları ile ne yapacağını bilir. Farklı dosya tiplerini projenize eklemek için Yükleyiciler (Loaders) kullanmanız gerekir. Bu yükleyicileri paket yöneticinizle projenize dahil ederek webpack içerisinde kullanabilirsiniz. Örneğin .css dosyaları için css-loader, .sass dosyaları için sass-loader kullanabilirsiniz. Yükleyicileri kullanarak diğer dosya türlerinin yönetimini de webpack ile yapmış olursunuz.

Eklentiler (Plugins) yükleyiciler ile gerçekleştirilemeycek bazı diğer işlemleri yapmak için kullanılır. Örneğin çıktı dosyalarını küçültmek (minitfy), gereksiz css’leri atmak (purgecss) veya derlemeden önce eski dosyaları tamamen silmek gibi işlemler eklentiler ile yapılır.

Webpack’in en kısa ve son bileşeni olarak mod (mode) ‘dan bahsedebiliriz. Mod “Development” veya “Production” gibi ortam tanımlamaları yaparak webpack’in uygulamanızı derlerken hangi konfigürasyon dosyaları ve iyileştirmeleri yapacağını belirler. Örneğin çıktı dosyalarını küçültmek (minify) veya gereksiz css’leri atmayı (purge css) sadece üretim (production) ortamında yaparken, geliştirici (development) ortamında hata ayıklama için eklentiler kullanabilirsiniz.

Sonsöz

Webpack özellikle javascriptle frontend yazılımlar geliştirenler için kodlamayı kolaylaştıran, kalitesini artıran, son kullanıcı deneyimini iyileştiren yazılımcının hayatını değiştirecek bir ürün.

Her ne kadar uzun ve detaylı bir yazı olsa da webpack’in tüm detaylarına, ayarlarına ve gerçek örneklere bir yazıda değinmek mümkün değil. Webpack ile ilgili bundan sonraki yazılarıma şekil verebilmem için sizler de yorumlarınızı paylaşırsanız mutlu olurum.

Bu Yazıda Yapılan Değişiklikler
  • 11.05.2022: Yazı özeti düzenlendi.