Webpack — nedir, mimarisi ve çalışma prensibi

Webpack nedir?

Webpack, uygulama bağımlılıklarını analiz eden ve bunları tarayıcı veya sunucu için statik dosyalara paketleyen bir modül paketleyicisidir. 2012 yılında Tobias Koppers tarafından oluşturulan Webpack, tüm dosyalar modüldür konsepti sayesinde hızla derleme standardı haline geldi: JavaScript, CSS, resimler, yazı tipleri ve hatta HTML, tek bir loader sistemi aracılığıyla işlenir.

Webpack neden endüstri standardı haline geldi

Webpack, zamanına göre devrim niteliğinde bir fikir getirdi: loader'lar, import veya require aracılığıyla herhangi bir kaynağı dahil etmenize olanak tanır. Bu, geliştiricileri CSS ön işlemcileri (SCSS), TypeScript derleyicileri ve görüntü optimize edicileri için ayrı araçlar kullanma zorunluluğundan kurtardı. 2020 yılına kadar JavaScript projelerinin %80'inden fazlası Webpack kullanıyordu (npm istatistik verileri: 2019–2024).

Rakipler — Vite, Parcel ve Turbopack — daha hızlı geliştirme sunar, ancak Webpack, kararlılığı, olgun ekosistemi ve geriye dönük uyumluluğu sayesinde kurumsal segmentte liderliğini sürdürmektedir. Büyük projelerde Webpack'ten Vite'ye geçiş haftalar alır ve genellikle eklenti uyumsuzluğu nedeniyle engellenir.

Webpack nasıl çalışır

Webpack, giriş noktasından başlayarak bir bağımlılık grafiği oluşturur. Bulunan her import veya require grafiğe eklenir, bir loader zincirinden geçer ve bir parçaya yerleştirilir. Nihai çıktı, yapılandırmaya bağlıdır: tek bir paket, birden çok parça veya UMD, CommonJS veya ES Module formatlarında kitaplık çıktısı.

Webpack derleme süreci

// Minimum Webpack 5 yapılandırması
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    clean: true,
  },
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, filename: 'vendor.[contenthash:8].js' } },
    },
  },
};

Webpack 5, dosya sistemi tabanlı yerleşik bir önbellek sunarak yeniden derlemeleri 2–5 kat hızlandırdı. Kalıcı önbellekleme, modül dönüştürme sonuçlarını çalıştırmalar arasında kaydeder; bu, CI/CD'de özellikle önemlidir. Etkinleştirmek için yapılandırmaya cache: { type: 'filesystem' } eklemeniz yeterlidir.

Webpack temel kavramları

Webpack dört temel kavramla çalışır: Entry (giriş noktası), Output (çıktı), Loaders (dönüşümler) ve Plugins (uzantılar). Bu kavramları anlamak, basit bir siteden karmaşık bir kurumsal uygulamaya kadar herhangi bir derlemeyi yapılandırmak için gereklidir.

Entry, Output ve modlar

Entry, bir veya daha fazla giriş noktasını tanımlayan bir dizi veya nesnedir. Çoklu giriş, çok bileşenli uygulamalar için kullanılır. Output, çıktı dosyalarını yapılandırır: yol, ad şablonu, genel URL. Mode — development, production veya none — her mod için otomatik olarak optimum eklentileri ve varsayılan değerleri etkinleştirir.

Content Hash — dosya adına bir içerik karması ([contenthash]) dahil etmek, uzun süreli önbellekleme sağlar. Tarayıcı, yalnızca içeriği değiştiğinde yeni bir dosya yükler. SplitChunksPlugin, farklı giriş noktalarındaki ortak bağımlılıkları otomatik olarak ayrı parçalara çıkararak kod tekrarını önler.

Loaders ve Plugins

Loaders, kaynak dosyaları bağımlılık grafiğine eklemeden önce dönüştürür. Her loader, dosya içeriğini alan ve bir JavaScript modülü döndüren bir işlevdir. Plugins, başlangıçtan çıktı dosyası oluşturmaya kadar tüm derleme yaşam döngüsüne erişimi olan daha güçlü uzantılardır.

Popüler loader'lar ve amaçları

Plugins, loader'ların aksine, derlemenin herhangi bir aşamasında eylem gerçekleştirebilir. HtmlWebpackPlugin, bağlantılı komut dosyalarıyla otomatik olarak bir HTML dosyası oluşturur. MiniCssExtractPlugin, paralel yükleme için CSS'i ayrı dosyalara çıkarır. DefinePlugin, derleme sırasında ortam değişkenlerini uygulama koduna aktarmaya olanak tanır.

Webpack derleme optimizasyonu

Webpack, yerleşik optimizasyon mekanizmaları sağlar: tree shaking, code splitting ve sıkıştırma. Tree shaking, ES modüllerinden kullanılmayan dışa aktarımları kaldırır. Code splitting, import() aracılığıyla paketi dinamik parçalara böler. Minimizer — JS için TerserPlugin ve CSS için CssMinimizerPlugin.

Gelişmiş optimizasyon teknikleri

// webpack.config.js — production derleme optimizasyonu
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: { compress: { drop_console: true }, mangle: true },
      }),
      new CssMinimizerPlugin(),
    ],
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      maxAsyncRequests: 30,
    },
  },
};

Module Federation, mikro ön yüzler için Webpack 5'in en güçlü özelliğidir. Çalışma zamanında diğer bağımsız derlemelerden modüller yüklemeye olanak tanır. Her mikro uygulama bağımsız olarak geliştirilir ve dağıtılır, ancak kullanıcı için tek bir arayüzde birleştirilir. Segment Analytics, 2021'den beri üretimde Module Federation kullanmakta ve dağıtım süresini %80 oranında azaltmaktadır.

React Native ve web projeleri için Webpack

Webpack, React Native'de doğrudan nadiren kullanılır — bunun için Metro vardır. Ancak Webpack, tek bir kod tabanının hem mobil platformlar (Metro aracılığıyla) hem de web (Webpack aracılığıyla) için derlendiği React Native Web projelerinde kullanılır. Webpack ayrıca Ionic ve Cordova ile hibrit uygulamalarda da popülerdir.

Platformlar arası derleme için Webpack

Web oluşturma için React Native Web'in kullanıldığı projelerde Webpack, yerel modülleri web uygulamalarıyla değiştiren takma adlarla yapılandırılır. Alias react-native → react-native-web, içe aktarmaları değiştirmeden paylaşılan bileşenleri kullanmaya olanak tanır. DefinePlugin, platforma özgü kodun koşullu derlenmesi için bir platform bayrağı iletir.

Mobil web için Webpack optimizasyonu, masaüstünden farklıdır. Mobil öncelikli derleme, agresif küçültme, görüntülerin geç yüklenmesi ve kritik CSS'in öncelikli olarak yüklenmesini içerir. CompressionPlugin brotli sıkıştırma ile 3G/4G mobil ağlar için paket boyutunu %20–25 oranında azaltır. Farklı platformlar için yapılandırmaları bölmek amacıyla webpack-merge kullanın: mobil öncelikli ve masaüstü için optimize edilmiş derlemeler.

Webpack 5 Module Federation: Mikro ön yüzler

Module Federation, npm'de yayınlamadan diğer bağımsız derlemelerden JavaScript modülleri yüklemeye olanak tanıyan, Webpack 5'in devrim niteliğindeki bir özelliğidir. Her mikro uygulama bağımsız olarak geliştirilir, kendi Webpack yapılandırmasına sahiptir ve ayrı olarak dağıtılır. Host uygulaması, ModuleFederationPlugin'in özel bir yapılandırması aracılığıyla uzak derlemelerden modülleri bağlar.

Sağlayıcı, seçilen modülleri kullanıma sunar ve ana bilgisayar bunları bağlamak için remotes kullanır. Module Federation, paylaşılan kitaplıkları destekler: React iki mikro uygulamada kullanılıyorsa, Webpack onu yalnızca bir kez yükler. Bu, kullanıcı için %60'a kadar trafik tasarrufu sağlar. Segment ve Best Buy dahil büyük şirketler, Module Federation'ı üretimde kullanarak dağıtım süresini saatlerden dakikalara indirmiştir.

Yaygın sorunlar ve çözümleri

Module Federation ile çalışırken, geliştiriciler sıklıkla farklı sürümlerdeki paylaşılan bağımlılıkların çakışmalarıyla karşılaşır. Çözüm, kritik kitaplıklar için açıkça requiredVersion ve singleton: true belirtmektir. Diğer bir sorun, özellikle React Context ve Redux ile uzak bir derlemeden bileşen içe aktarırken bağlam kaybıdır. Bunu çözmek için, tüm mikro uygulamaların tek bir React örneği kullanmasını sağlamak amacıyla shared: { react: { singleton: true } } kullanın. Büyük mikro ön yüz mimarileri için, paylaşılan bağımlılıkların sürümlerini senkronize etmek ve derleme tutarlılığını sağlamak amacıyla Module Federation'ın bir monorepo sistemi (Nx, Turborepo) ile birlikte kullanılması önerilir.