Webpack Series
Webpack’e Başlangıç
Webpack bir paketleme aracı, bu araç (js,css,font,jpg vb….) dosyaları paketleyerek sunucu, istemci arasındaki performans ve kalite düzeyini arttırmanın ötesinde, bir takım plugin araçları ile geliştirici ortamı ile production ortamının birbirinden soyutlayarak geliştiricilere büyük esneklikler sağlar
JS uygulamaları geliştirirken bir çok js ve css dosyası bulunur, özellikle React, Vue, Svelte yazılmış günümüz projelerinde yüzlerce ,binlerce bileşenin kullanıldığı sayfalar var. Tüm bu dosyaların sunucudan istemciye parça parça yüklenmesi hem performans hem de istemci tarafında dosyaların stabil modda olmamasından dolayı paketlenerek belli büyüklükteki parçalara toplanarak tarayıcıya yüklenir. Bunu sağlayan paketleme araçlarına bundler denir. Webpack, Parcel, Rollup günümüz popüler modül paketleme araçlarından bazıları.
Yardımcı Yazılar Bu konuyu Modül kavramını tam olarak anlamadan başlamayın, JS Modules yazımda . IIFE, CJS, AMD require.js nasıl kullanıldığını anlatmıştım. Zaman içerisinde projelerin büyümesi ile bu modül yönetiminin ne kadar zor hale geldiğini anlayabilmeniz için bu yazımı okumanızı öneririm , 2nci bir konuda geliştirici seviyesindeki kodların Preprocessors ile production moduna çevrilmesi, bu konuda Why Web Dev Preprocessors are So Important? yazımı okumanızı öneririm.
Şimdi olayları çok büyütmeden pratik olarak webpack anlatmaya çalışacağım, her zamanki gibi ilerleyen yazılarda konunun detaylarına ineceğim.
Basit bir node projesi oluşturalım.
mkdir webpack-sample-01
cd webpack-sample-01
npm initBunun içerisine basit bir index.html oluşturalım ve bu bizim arkada oluşturacağımız bütün js dosyalarının paketlemiş olan bundle.js dosyasını load ediyor olsun.
<!doctype html>
<html>
<head>
<script src="dist/bundle.js"></script>
</head>
<body>
WebPack Sample 01
</body>
</html>İlk başta bundle.js dosyamız yok.
- Birinci olara /src klasörü altında tüm js modüllerimiz geliştireceğiz
- Sonrasında webpack ile bu dosyaları paketleyip bundle.js dosyasını oluşturacağız
1. Kaynak Dosyalarımızı Oluşturalım
Src paketinin altında 3 tane dosya oluşturdum. index.js, util.js, array.js
Görüldüğü gibi ES6 modülü yapısı ile istediğiniz kadar modülü birbirine import/export yöntemi ile bağlayarak kullanabilirsiniz. Src klasörü altında çok büyük projeler geliştirebilirsiniz.
2. Webpack aracının Local Yüklenmesi
Webpack local ortama yüklemek için aşağıdaki komutları kullanabilirsiniz.
npm install --save-dev webpack
npm install --save-dev webpack-cliburadak save-dev ilgili paketin devDependencies altına yüklenmesini sağlar. Çünkü bu araç production zamanı çalışacak bir kütüphane değildir. Build zamanı çalışacak bir araçtır. Package.json scripts altına bu kodu ekleyerek build işlemi sırasında webpack çalıştırılması sağlanır."build": "webpack --config webpack.config.js"
webpack.config.js dosyası adından da anlaşılacağı gibi paketlemenin nelere göre yapılacağını verdiğiniz konfigurasyon dosyasıdır. Basit anlamda girdi noktası (entry), çıktı klasörü ve dosyası (output) ve çalıştırma modu (mode) içerir.
npm run-script build komutu webpack aracını ilgili konfig ve kaynak dosyaları ile çalıştırıp bir çıktı oluşturur. Bu kısımda js modüllerini hangi chunk içerisine attığını, boyutlarınız ve build etme zamanını görebilirsiniz.
index.html dosyasının console kısmına geldiğimizde projemizin çalıştığını ilgili js kodlarının bulunduğunu görebilirsiniz.
mode=production yaptığınız arkaplandaki source file görmeden sadece bundle.js içerisinde olduğunu görebilirsiniz. Buda kodu debug edebilmenizi oldukça zorlaştırır. Development ile Production arasında kodun görünümü anlamında bir çok fark bulunur.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
