Build Tools Eğitimi: Vite ve Webpack

Eğitim Hakkında

Modül paketlemeden Vite ve Webpack yapılandırmasına, tree shaking ve üretim optimizasyonundan HMR'a

FSD Front-end Development: Build Tools Eğitimi, modern ön yüz projelerinin kaynak kodunu tarayıcıya uygun, optimize edilmiş çıktıya dönüştüren derleme araçlarını öğretir. Katılımcılar modül paketleme mantığını, Vite ve Webpack yapılandırmasını, esbuild ve Babel ile dönüşümü kavrar. Kod bölme, tree shaking, hot module replacement, kaynak haritaları ve üretim optimizasyonu işlenir; program gerçek bir projenin derleme hattını kurmayla tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; paketleme temelinden başlayıp Vite ve Webpack yapılandırması ile üretim optimizasyonuna doğru ilerler.

Seviye

Orta Seviye — Modern ön yüz derleme araçları: Vite, Webpack, esbuild ile paketleme, optimizasyon ve yapılandırma

Öğrenme Metodu

Her modülde bir derleme senaryosu kurulur; katılımcılar yapılandırmayı yazar, çıktıyı analiz eder ve paket boyutu ile hızı iyileştirir.

Neden Bu Eğitim?

⚙️Süreci anlamak

Hazır şablonların arkasındaki derleme sürecini kavrayarak yapılandırmayı körlemesine değil bilinçli biçimde yönetirsiniz.

🚀Hızlı geliştirme

Vite ve esbuild gibi araçlarla anında sunucu başlatma ve hızlı yeniden yükleme sağlayarak geliştirme döngüsünü kısaltırsınız.

📦Küçük paketler

Tree shaking, kod bölme ve minify ile üretim paketini küçültüp uygulamanın açılış performansını belirgin iyileştirirsiniz.

Anahtar Konular

build tools eğitimivite eğitimiwebpack eğitimiesbuild eğitimimodül paketlemekod bölme eğitimitree shakingön yüz derleme araçlarıfrontend build eğitimijavascript bundler kursu

“Derleme aracını anlamak, projenizin kaputunu açmaktır; motoru gören geliştirici hızı ve boyutu tesadüfe bırakmaz.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve kurulum

1

JavaScript bilgisi

ES modülleri, import/export ve modern JS söz dizimine pratik hakimiyet beklenir; derleme kavramları bu temele dayanır.

2

Node ve npm

Node.js, npm veya pnpm ile paket kurma ve script çalıştırma mantığına aşinalık, araç kullanımında gereklidir.

3

Komut satırı

Terminalde komut çalıştırma ve proje klasörlerinde gezinme becerisi, derleme araçlarının kullanımında işe yarar.

4

Geliştirme ortamı

Node.js, bir kod editörü ve örnek bir ön yüz projesinin kurulu olması uygulamalar için gereklidir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı modül sistemlerini ve paketleyicinin neden gerektiğini kavrar; bağımlılık grafiği, giriş noktası ve çıktı kavramlarını örneklerle çözer.

Modül 1

Modül Sistemleri

ES modülleri (ESM) ve import/export
CommonJS ve require sistemi farkı
UMD ve tarayıcı modül uyumluluğu
Modül çözümleme (resolution) mantığı
Statik analiz ve bağımlılık keşfi
Çıplak (bare) içe aktarım ve node_modules

Modül 2

Paketleyici Neden Gerekir

Çok sayıda modülün tek dosyada toplanması
Tarayıcı istek sayısının azaltılması
Eski tarayıcılar için dönüşüm ihtiyacı
Varlık (asset) işleme ve içe aktarma
Geliştirme ile üretim yapısı farkı
Paketsiz ESM yaklaşımının sınırları

Modül 3

Bağımlılık Grafiği

Giriş noktasından (entry) grafiğin kurulması
Modüller arası bağımlılıkların izlenmesi
Grafikten çıktı paketlerinin üretilmesi
Döngüsel bağımlılıkların etkisi
Dinamik import ile grafik dallanması
Grafik görselleştirme ve analizi

Modül 4

Giriş ve Çıktı Yapısı

Tek ve çok giriş noktası tanımı
Çıktı dosya adı ve dizin ayarı
Content hash ile önbellek kırma
public path ve varlık konumu ayarı
Temiz derleme çıktısı yönetimi
Çoklu hedef (target) için çıktı

Günün hedefiKatılımcı Vite ile hızlı geliştirme sunucusu kurar, Webpack'in loader ve plugin mimarisini kavrar ve iki aracın güçlü yönlerini karşılaştırır.

Modül 1

Vite ile Geliştirme

Vite dev sunucusunun ESM temelli çalışması
Anında sunucu başlatma avantajı
esbuild ile ön paketleme (pre-bundling)
Rollup tabanlı üretim derlemesi
vite.config ile yapılandırma ayarı
Eklenti ekosistemiyle genişletme

Modül 2

Webpack Çekirdek Kavramları

entry, output ve mode ayarları
Loader ile dosya tipi dönüşümü
Plugin ile derleme sürecine müdahale
Modül kuralları (rules) tanımı
resolve ile içe aktarım yapılandırması
Webpack derleme yaşam döngüsü akışı

Modül 3

Loader ve Plugin Kullanımı

babel-loader ile JavaScript dönüşümü
CSS ve style loader zincir kullanımı
Varlık modülleriyle resim ve font
HtmlWebpackPlugin ile HTML üretimi
DefinePlugin ile ortam değişkeni
Loader sırası ve zincir mantığı

Modül 4

Araç Seçimi ve Karşılaştırma

Vite ve Webpack geliştirme hızı farkı
Yapılandırma karmaşıklığı karşılaştırması
Ekosistem ve eklenti olgunluğu
Eski proje ve yeni proje tercihi
esbuild ve Rollup araçlarının rolü
Projeye uygun aracın seçilmesi

Günün hedefiKatılımcı kod bölme, tree shaking ve minify ile paketi küçültür, HMR ile geliştirmeyi hızlandırır ve üretim derlemesini uçtan uca kurar.

Modül 1

Kod Bölme (Code Splitting)

Dinamik import ile tembel yükleme
Rota tabanlı parça (chunk) ayrımı
Ortak (vendor) kodun ayrılması
splitChunks ile parça stratejisi
Ön yükleme (preload/prefetch) ipuçları
Parça boyutu dengesinin kurulması

Modül 2

Tree Shaking ve Minify

Kullanılmayan kodun elenmesi (tree shaking)
ESM statik yapısının eleme için önemi
sideEffects alanıyla güvenli eleme
Terser ve esbuild ile küçültme
Ölü kod ve kullanılmayan bağımlılık tespiti
Paket boyutunun ölçülmesi ve analizi

Modül 3

Hot Module Replacement

HMR ile modülün sayfayı yenilemeden güncellenmesi
Durum korunarak hızlı geri bildirim
Vite'ta yerleşik HMR davranışı
Webpack dev server ile HMR kurulumu
HMR sınırlarının (boundary) belirlenmesi
Geliştirme döngüsünün hızlandırılması

Modül 4

Üretim Derlemesi ve Teşhis

Üretim moduyla optimize çıktı üretimi
Kaynak haritalarının (source map) yönetimi
Önbellek stratejisi ve hash'leme
Paket analiz aracıyla boyut incelemesi
Ortam değişkeni ile yapı farklılaştırma
Derleme hattının CI'a bağlanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Paketleme mantığı

Modül sistemlerini ve bağımlılık grafiğini kavrayarak paketleyicinin neden ve nasıl çalıştığını derinlemesine anlarsınız.

✅

Vite hakimiyeti

Vite ile anında başlayan geliştirme sunucusu kurar, ESM temelli hızlı iş akışını ve yapılandırmasını yönetirsiniz.

✅

Webpack yapılandırma

Webpack'in entry, output, loader ve plugin mimarisini kullanarak esnek ve ihtiyaca göre uyarlanmış yapı kurarsınız.

✅

Kod bölme

Dinamik import ve parça stratejileriyle kodu bölerek uygulamanın yalnızca gereken kısmının yüklenmesini sağlarsınız.

✅

Tree shaking

Kullanılmayan kodu eleyip minify ile küçülterek üretim paketini belirgin biçimde hafifletmeyi öğrenirsiniz.

✅

HMR ile hız

Hot module replacement ile durum korunarak anında geri bildirim alır, geliştirme döngüsünü belirgin biçimde hızlandırırsınız.

✅

Araç seçimi

Vite, Webpack ve esbuild'in güçlü yönlerini karşılaştırıp projeye en uygun derleme aracına bilinçli karar verirsiniz.

✅

Üretim yapısı

Kaynak haritası, önbellek ve analizle optimize bir üretim derlemesini CI hattına bağlayarak uçtan uca kurarsınız.

Kimler İçin Uygundur?

Modern JavaScript projeleri geliştiren
derleme sürecini anlamadan hazır yapılandırma kullanan
kendi yapı hattını kurup optimize etmek isteyen ön yüz
full-stack geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Modern JavaScript projeleri geliştiren, hazır şablonların derleme sürecini anlamadan kullanan ve kendi yapı hattını kurup optimize etmek isteyen ön yüz ve full-stack geliştiriciler için uygundur. ES modülleri, import/export ve npm script mantığına aşinalık beklenir; paketleme kavramları eğitimde temelden işlenir.

Vite mi Webpack mi öğrenmeliyim?

İkisi de ele alınır çünkü farklı ihtiyaçlara hizmet ederler. Vite yeni projelerde hızlı geliştirme sunucusu ve sade yapılandırmasıyla öne çıkar; Webpack olgun ekosistemi ve ileri düzeyde özelleştirilebilir mimarisiyle karmaşık ve eski projelerde güçlüdür. Eğitim her ikisini uygulamalı işler ve projeye göre doğru seçimin ölçütlerini verir.

Paket boyutunu küçültmeyi öğrenir miyim?

Evet. Tree shaking ile kullanılmayan kodun elenmesi, kod bölme ile yalnızca gereken parçanın yüklenmesi, minify ve vendor ayrımı ile üretim paketinin küçültülmesi uygulamalı işlenir. Paket analiz araçlarıyla boyutu ölçmeyi ve en çok yer kaplayan bağımlılıkları tespit edip iyileştirmeyi de öğrenirsiniz.

Eğitimin süresi ve formatı nedir?

Eğitim üç gün sürer ve her gün dört modülden oluşur. Paketleme temelinden başlayıp Vite ve Webpack yapılandırması ile üretim optimizasyonuna ilerler. Yüz yüze veya online yapılabilir; içerik kurumun kullandığı çatı ve teknoloji yığınına göre uyarlanabilir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve kurulan derleme hattı projesini belgeler; kurumsal gruplara kurumun kendi projeleri üzerinden yapı optimizasyonu atölyesiyle genişletilebilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

FSD FRONT-END DEVELOPMENT: BUİLD TOOLS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Modül Sistemleri

Paketleyici Neden Gerekir

Bağımlılık Grafiği

Giriş ve Çıktı Yapısı

Vite ile Geliştirme

Webpack Çekirdek Kavramları

Loader ve Plugin Kullanımı

Araç Seçimi ve Karşılaştırma

Kod Bölme (Code Splitting)

Tree Shaking ve Minify

Hot Module Replacement

Üretim Derlemesi ve Teşhis

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Front-end Apps: RESTful Services & Clients Eğitimi

Front-end Apps: Servlets & JavaServer Pages Eğitimi

Front-end Apps: Transaction Support Eğitimi

Front-end Apps: Web Components Eğitimi

FSD Front-End Development: Frameworks Eğitimi

FSD Front-end Development: Server Tools Eğitimi