Webpack — JavaScript Modül Paketleyici

webpack modül pakeyleyicisi

Webpack nodejs tabanlı yazılmış bir javascript modül paketleyicisidir.

Temel amacı, bir tarayıcıda kullanılmak üzere JavaScript dosyalarını bir araya getirmektir, ancak aynı zamanda herhangi bir kaynak veya bileşeni dönüştürme, paketleme özelliğine de sahiptir.

Modül paketleyici nedir ?

Modül paketleyici aslında yazdığımız her kod parçacığını ve bileşeni bir araya getirip paket halinde belirli işlemlerlerden geçirerek kullanmamıza imkan sağlar.

Bileşenler aslında sürekli kullandığımız js (es6, jsx), image(png, jpg), css(sass, less, scss) vb dosyalardır.

Örneğin; Sass ile yazdığımız kodları bir araya getirip minimize ettikten sonra tek bir css dosyasına dönüştürme işlemi yapmamız mümkün.

Ayrıca es6, jsx vb javascript kodlarınıda js dosyasına dönüştürme işlemi yapabilmekteyiz.

Neden ihtiyaç duyarız ?

Modülleri paketlemek sadece bileşenleri bir araya getirmek için değil aslında gelişen modern yapılarada ayak uydurmak için en iyi çözümlerden biri.

Buna şöyle bir örnek verebiliriz diyelim ki uygulamamızda modern javascript ile kodlama yapmak istiyoruz fakat bunu direkt olarak yapmamız mümkün olmuyor. Bunun nedeni ise client yani istemcinin destek verdiği javascript yapısına uygun olmaması.

es6 ile import() özelliğini destekleyen tarayıcılar ve sürümleri

Yukarda gösterdiğimiz resimde ecmascript 6 ile birlikte gelen import() özelliğini destekleyen tarayıcı ve sürümleri mevcut.

Bunlar; chrome 63 ≥, firefox 67 ≥ ve edge 76 ≥

Özetlemek gerekirse modern javascript ile yazdığımız kod parçacıklarını henüz birçok eski veya yeni sürüm tarayıcılar desteklememekte.

İşte tamda bu noktada modül paketleyiciler ile bunlara çözüm bulabiliriz.

Webpack bu noktada en popüler ve en geniş geliştirme kitlesine sahip bir paketleyici olarak karşımıza çıkıyor.

Kullanım istatistikleri:

• 3.8 milyon kullanım
• 52 bin favori
• 560 katılımcı
• 10 bin ve üzeri commit ile reposunu güncel tutarak popülaritesini artırmaktadır.

Webpack repo

Peki webpack ile neler yapılabiliriz ?

• Birden fazla bileşeni bir araya getirebiliriz
• Bileşenleri minimize edebilir veya kodları karmaşık hale getirebiliriz (minify, uglify vb)
• Kod bölme, isteğe bağlı olarak uygulamanın parçalı olarak yüklenmesini sağlayabiliriz
• Bileşenleri tarayıcı veya istemciler için anlaşılır kod parçacıklarına dönüştürebiliriz

Webpack alternatifleri ise;

• StealJS
• JSPM
• Browserify
• Bower
• Gulp
• Grunt
• Rollup
• RequireJS

Kaynaklar;

webpack

webpack/webpack

Bir sonraki yazıda webpack ile paketlerin kullanımı ve loader, plugin gibi özelliklerin detaylarını inceleyeceğiz.