Webpack

Okunuşu: vebpek

Güncellendi 3 Ekim 20262 dk okuma

Kısaca

Webpack, uygulamanın import'larını izleyip JavaScript, CSS, görsel ve diğer dosyaları tarayıcıya uygun paketlerde birleştiren modül paketleyicisidir.

Webpack nedir?

Webpack ilk olarak 2014'te yayımlandı ve React ile tek sayfalı uygulamalar döneminin standart derleme aracı oldu. Bir giriş dosyasından başlar, bütün uygulamanın bağımlılık grafiğini çıkarmak için her import ve require'ı izler ve sonucu tarayıcının verimli şekilde yükleyebileceği bir ya da daha fazla paket dosyası olarak yazar.

Gücünü loader'lardan ve eklentilerden alır. Loader'lar webpack'in JavaScript olmayan dosyaları anlamasını sağlar: bir TypeScript loader'ı ile TypeScript'i, bir Sass loader'ı ile Sass'ı, varlık (asset) olarak da görselleri ve fontları. Eklentiler ise derlemeye bağlanarak kodu küçültür, CSS'i ayıklar, HTML üretir, kodu ihtiyaç anında yüklenen parçalara böler ve tree shaking ile kullanılmayan export'ları atar.

Geliştirme sırasında webpack'in dev server'ı her kaydetmede yeniden derler ve hot module replacement ile değişen modülleri çalışan sayfaya yerleştirebilir. Bütün bunlar bir webpack.config.js dosyasında yapılandırılır; bu da webpack'i son derece esnek yaptı, ama karmaşık yapılandırmalarıyla da ünlü kıldı.

Sık yapılan bir yanlış, webpack'in artık kullanılmadığını düşünmektir. Yeni projeler bugün genellikle Vite gibi daha hızlı araçlarla ya da framework'e özel paketleyicilerle başlıyor; ama çok sayıda mevcut uygulama hâlâ webpack ile derleniyor ve loader'lar, kod bölme ve hot module replacement gibi fikirleri ondan sonra gelen her paketleyiciyi şekillendirdi.

Önemli noktalar

Webpack, bir uygulamanın modüllerini ve varlıklarını tarayıcı için dosyalarda paketler.
Bir giriş dosyasından her import'u izleyerek bir bağımlılık grafiği kurar.
Loader'lar JavaScript olmayan dosyaları ele alır; eklentiler derlemeyi genişletir.
Kod bölmeyi, tree shaking'i ve hot module replacement'ı destekler.
Vite gibi yeni araçlar daha hızlı, ama webpack hâlâ birçok uygulamayı çalıştırıyor.

Örnek

Küçük bir webpack.config.jsjavascript

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: "./src/index.ts",
  output: { filename: "[name].[contenthash].js", clean: true },
  resolve: { extensions: [".ts", ".js"] },
  module: {
    rules: [
      { test: /\.ts$/, use: "ts-loader" },                 // TypeScript
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.(png|svg)$/, type: "asset" },             // images
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};

Sık sorulan sorular

Webpack ile Vite arasındaki fark nedir?

Webpack geliştirme sırasında bile bütün uygulamayı sunmadan önce paketler. Vite ise geliştirme sırasında kaynak dosyaları tarayıcıya yerel ES modülleri olarak sunar; bu yüzden neredeyse anında açılır ve yalnızca production için paketler.

Webpack loader'ı nedir?

Webpack'in doğal olarak anlamadığı TypeScript, Sass, CSS ya da görseller gibi bir dosya türünü, paketleyebileceği modüllere dönüştürerek import etmesini sağlayan bir dönüştürücüdür.

Webpack'i kendim mi yapılandırmalıyım?

Çoğu zaman hayır. Birçok framework ve başlangıç aracı bir paketleyiciyi sizin yerinize yapılandırır. Webpack yapılandırmasıyla doğrudan çoğunlukla eski ya da özel kurulmuş projelerde karşılaşırsınız.

Sık karşılaştırılanlar

Vite vs WebpackWebpack geliştirmede bile tüm uygulamayı sunmadan önce paketler; Vite ise yerel ES modülleri sunar, yalnızca production için paketler ve bu yüzden hızla açılır.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin