Webpack Nedir ? Kurulumu ve Kullanımı Nasıldır ?

Merhaba arkadaşlar, bu yazımda sizlere webpack nedir ? Ne amaçla kullanılır ve kullanımı nasıldır ? Multi page bir siteyi webpack ile nasıl yapabiliriz ? şeklinde ki sorulara yanıt vermeye çalışacağım.

Webpack Nedir ?

Webpack web uygulamalarında kullandığımız JavaScript dosyalarını tek parça haline getirmek için kullanılan bir modül paketleyicisidir.(Not: Sadece Js dosyalarını birleştirmek için kullanmayacağız. ) Kullanılan çoğu JavaScript uygulaması başka bir JavaScript dosyalarında yer alan kütüphaneye ihtiyaç duymaktadır. JavaScript dosyalarının artması beraberinde web sayfalarının yavaş açılmalarına neden olur. Bu yavaşlığın önüne geçebilmek için de JavaScript dosyalarının birleştirilmesi gerekir. JavaScript dosyalarını birleştirmek için daha önceden kullandığım Gulp veya Grunt gibi çeşitli web araçları da kullanılabilir.

Webpack Kurulumu

Webpack kurulumu yapabilmeniz için bilgisayarınızda node.js ve npm kurulu olması gerekir. Şimdi bunların kurulu olduğunu varsayarak işlemimize devam ediyoruz.

# Global olarak kurulum
npm install -g webpack webpack-cli

# Proje bazlı kurulum
npm install --save-dev webpack webpack-cli

Webpack versiyonları ile ilerde uğraşmak istemiyorsanız, proje bazlı kurulum yapmanız iyi olur.

Ben projeyi WebStorm üzerinden kurup oradan devam edeceğim. Sizde alışkın olduğunuz ide üzerinden devam edebilirsiniz.

Öncelikle webpack-learning adında boş bir proje oluşturalım,projede ki kullanacağımız modülleri eklemek için package.json dosyasını oluşturarak başlayalım projeye,bunun için terminal üzerinden proje dizinine gidip

npm init

komutunu çalıştıralım. Karşımıza proje ile ilgili bir kaç soru çıkacak,bunları doldurmadan da yolumuza devam edebiliriz. Şimdi package.json dosyamızı da oluşturduğumuza göre webpack kurulumuna başlayalım.

npm install — save-dev webpack webpack-cli

komutunu terminalden çalıştırıp webpack kurulumunu sağladık. Şu anda package.json dosyamız şu hale geldi;

Webpack konfigürasyonlarını tanımlamak için webpack.config.js dosyasını oluşturmamız gerekiyor. Proje dizininde bu dosyayı oluşturalım.

Webpack konfigürasyonunu entry olarak src/ klasörü output olarak dist/ klasörü olacak şekilde ayarlayalım.

Şimdi proje dizinimizde src klasörü oluşturup içerisine main.js dosyasını ekleyelim, ve deneme amaçlı bir toplama işlemi yapalım.

package.json dosyasına gerekli scriptleri ekleyelim.

"dev": "webpack --mode=development",
"build": "webpack --mode=production",

package.json dosyasının son hali bu şekilde oldu

Terminalden

npm run build

komutunu çalıştıralım ve ilk çıktımızı alalım. Eğer buraya kadar işlemleri doğru yaptıysanız aşağıdakine benzer bir sonuç elde etmeniz lazım.

Bir sonraki adımımıza geçelim şimdi, her build aldığımızda yeni bir dosya oluşturuluyor ve eski dosyada kalıyor, bunun önüne geçebilmek için de her build alındığında önce /dist klasörünün içerisini temizleyip, sonra yeni dosyaları çıkartalım. Bunun için clean-webpack-plugin paketinden yararlanacağız.

npm install --save-dev clean-webpack-plugin

komutu ile gerekli paketi yükleyelim. Daha sonrasında indirdiğimiz plugini webpack.config.js dosyamıza ekleyelim.

Bundan sonra her build aldığımızda değişiklik olan eski dosyalar silinip, yenisi eklenecektir.

Webpack ile Html Dosyaları Yönetimi

Şu ana kadar build işlemlerini webpack ile yaptık. Fakat yaptığımız işlemleri hala bir web tarayıcısında görebilmiş değiliz. Bunun için webpack’in html dosyalarını işlemesini sağlatmalıyız. Dolayısıyla projemize aşağıdaki komutu çalıştırarak html-webpack-plugin plugin'ini yükleyelim.

npm install --save-dev html-webpack-plugin 

src klasörü altına aşağıdaki gibi bir index.html dosyası oluşturalım.

Şimdi de build sırasında html dosyalarının da işleme alınması için config dosyamızı güncelleyelim.

Şimdide npm run dev komutunu çalıştıralım. dist klasöründe artık index.html dosyamız da var. Bu dosyayı tarayıcıda açıp console'u açarsanız yaptığımız örnekteki toplama işleminin sonucunu görebilirsiniz.

Burada işlemi bir adım daha ilerletelim. Bu yaptığımız örnekte tek bir sayfa ekleyerek işlem yaptık, peki birden fazla sayfa eklemek istediğimizde ne yapmamız gerekiyor ? Bununda cevabı basit.. Örnek üzerinden devam edelim, src altında contact sayfası oluşturalım ve bunu da config dosyamıza ekleyelim.

Gördüğünüz gibi plugins altında sayfayı eklememiz yeterli.

Aklınıza şöyle bir soru gelebilir: ‘Peki sayfa sayısı çok fazla olduğunda her birini tek tek eklemek mi gerekecek?’

Tabiki hayır.. Gelin şimdi sayfa eklemeyi dinamik hale getirelim. Bunun için config dosyamızda bir kaç değişiklik yapacağız.

Burada dosyalama sisteminde bir kaç düzenlemeye gittik, html dosyalarımızı src/templates klasörü altında topladık, main.js dosyasını da bir js klasörü açarak içine taşıdık. Bir sonra ki adımımızda config dosyasının içinde bir fonksiyon yazarak templates klasöründe oluşturulan her bir html dosyasının otomatik olarak build sırasında çıkmasını sağlıyoruz.

Şimdi bunu bir kademe daha ilerletelim. Diyelim ki multi-language bir siteyi webpack ile yapmak istiyorsunuz, bunu nasıl otomatikleştirebiliriz ?

Daha önce yazdığımız fonksiyonda bir kaç değişiklik yaparak multi-language bir site yapmanın da rahatlığına kavuşabiliyoruz bu şekilde :)

Default olarak ingilizceyi ana dil olarak kabul ettim, siz kendinize uyarlarken istediğiniz şekilde değiştirirsiniz, ve klasör yapısının da değiştiğine dikkat edin :)

Şimdilik bu seriyi burada bitiriyorum. İşimiz tabiki bitmedi henüz, yazının bundan sonraki bölümünde pluginler ile çalışmaya devam edip css,scss,js, json modüllerini ekleyip, webpack ile resim eklemenin bir kaç yönteminden bahsedeceğiz.. Şimdilik esen kalın….:)