Genel Bakış

Öncelikle, Webpack‘i nasıl tanımlarız? Şöyle yaklaşalım; elimizde birden fazla dizinde bulunan birden fazla modül bulunmakta. Bir JS dosyası, birden fazla JS dosyasını içerisine çağırıyor, çalıştırıyor ve HTML etiketine ilgili çıktıyı basıyor. Tüm bunlar olurken bir de CSS ve diğer modüller yükleniyor. Burada tarayıcının önyükleme süresinin ne denli arttığını ve şişmiş dosya boyutlarını fark ettiniz mi?

Evet, tam da burada Webpack; bizim kullanacağımız kısa açıklama tabiri ile Modül Paketleyicimiz devreye girmekte. Webpack, ilk olarak 2013’te Tobias Koppers tarafından oluşturulmuştur. Süregelen zamanda ekibe dört yeni kişi daha eklenmiş ve açık kaynak olarak geliştirilmeye devam etmiştir.

Peki, Webpack sadece kendisine gelen dağınık modülleri paketlemeye mi yarar? Buna dolaylı yoldan hayır cevabını verebilirim. Webpack‘e bağımlı aynı zamanda Webpack Dev Server paketini kullanmaktayız. Burada dikkat edilmesi gereken tek nokta sadece geliştirme ortamında kullandığımızdır. Kısaca bahsetmek gerekirse; geliştirme ortamında uygulamanızı hem paketler hem de sanal bir ortamda gerçek zamanlı olarak size sunar. Siz uygulamanızda değişiklikleri yaptığınızda ve her kaydettiğinizde paketler ve yeniden size sunar. Bu işlemi uyglamanız canlıda hizmet verdiğinizde Next JS gibi popüler server side render paketleri ile ya da Express JS ile çözebilirsiniz.

Bu yazının devamında Webpack kullanımıi eklentilerini ve örnek kod bloklarını inceleyeceğiz.