Webpack nedir ve ne için kullanılır?

Webpack, modern JavaScript uygulamaları için statik bir modül paketleyicisidir. Projenizdeki dosyaları (modüller) işler ve bunları tarayıcıda kullanılabilecek tek veya birkaç bundle halinde birleştirir.

Webpack'in temel görevleri ve avantajları:

• Modül oluşturma: Projenin tüm bağımlılıklarını (JavaScript, CSS, resimler vb.) optimize edilmiş dosyalarda birleştirir. Bu, geliştirmede modüler bir yaklaşım sağlar.
• Transpilasyon ve polyfill: Loaders kullanarak modern JavaScript'i (ES6+) eski standartlara (ES5) dönüştürebilir ve yeni API'leri desteklemek için polyfill ekleyebilir.
• Kaynak yönetimi: Sadece JavaScript değil, aynı zamanda CSS (css-loader, style-loader), resimler (asset/resource), fontlar vb. gibi diğer dosya türlerini de işleyebilir ve bunları bundle'a dahil edebilir veya ayrı dosyalar oluşturabilir.
• Optimizasyon: Minifikasyon, sıkıştırma, kullanılmayan kodun kaldırılması (tree shaking) gibi birçok plugin ile bundle boyutunu küçültür.
• Kod bölme (Code Splitting): Bundle'ı daha küçük parçalara ayırabilir ve bunları talep üzerine yükleyebilir, böylece uygulamanın ilk yüklenme süresi hızlanır.
• Sıcak modül değişimi (Hot Module Replacement - HMR): Çalışan uygulamada modülleri tamamen yeniden yüklemeden güncellemeye olanak tanır, bu da geliştirme sürecini hızlandırır.
• Bağımlılık yönetimi: Projedeki karmaşık bağımlılık grafiğini etkin bir şekilde yönetmeye yardımcı olur.

Temel bir yapılandırma örneği (webpack.config.js dosyası):

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Giriş noktası
  output: {
    filename: 'bundle.js', // Çıkış bundle adı
    path: path.resolve(__dirname, 'dist'), // Çıkış dosyalarının dizini
  },
  module: {
    rules: [
      {
        test: /\.js$/, // .js uzantılı dosyalara kural uygula
        exclude: /node_modules/, // node_modules dizinini hariç tut
        use: {
          loader: 'babel-loader', // Babel-loader kullanarak transpile et
        },
      },
      {
        test: /\.css$/, // .css uzantılı dosyalara kural uygula
        use: [
          'style-loader', // CSS'i DOM'a ekle
          'css-loader',   // CSS'i işle
        ],
      },
    ],
  },
  plugins: [
    // Ekstra eklentiler (örneğin, minifikasyon, dosya kopyalama)
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true, // Sıkıştırmayı etkinleştir
    port: 9000,     // Geliştirme sunucusu portu
  },
};

Webpack, özellikle React, Vue ve Angular gibi framework ve kütüphanelerle modern web uygulamaları inşa etmek için de facto standart haline gelmiştir.