Webpack'e geçiş: Gulp'tan modül paketlemeye

Geçen yıl Gulp ile kurduğum derleme hattından gayet memnundum. Sass derleme, JavaScript birleştirme, minification, otomatik tarayıcı yenileme — hepsi bir aradaydı. Neden değiştireyim ki?

Sonra bir projede require() kullanmaya başladım. JavaScript’i modüller halinde yazmak, büyüyen kod tabanını organize etmek için zorunlu hale gelmişti. Gulp ile bunu çözmeye çalışırken browserify denedim; eklentilerle bir arada çalıştırmak için vakit harcadım. Derken Webpack’i düzgünce incelediğimde, aradığım şeyin orada olduğunu anladım.

Gulp ile Webpack arasındaki fark nedir?

Gulp, bir task runner’dır. “Şu dosyaları al, şu dönüşümleri uygula, şu yere yaz” akışını tanımlarsınız. Dosya sistemi üzerinde çalışır.

Webpack, bir module bundler’dır. Uygulamanızın dependency graph’ini takip eder: “bu dosya şunu require ediyor, o da bunu” diyerek tüm bağımlılıkları tek (ya da birkaç) çıktı dosyasında toplar.

İkisi de “derleme” yapıyor gibi görünür, ama farklı sorunları çözüyorlar. Webpack, modül bağımlılığı sorununu gerçekten çözüyor; Gulp bunu ancak eklentilerle yamalı biçimde yapabiliyordu.

Temel yapılandırma

Webpack’i npm ile kurmak yeterli:

npm install --save-dev webpack

Proje kökünde webpack.config.js oluşturuyorum:

var path = require('path');

module.exports = {
    entry: './src/js/app.js',

    output: {
        path: path.resolve(__dirname, 'public/js'),
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

entry noktası uygulamanın başlangıcı; Webpack oradan tüm bağımlılık ağacını izliyor. output derlenmiş dosyanın nereye yazılacağını belirtiyor.

Ardından npm run build komutunu package.json’a ekliyorum:

{
    "scripts": {
        "build": "webpack",
        "watch": "webpack --watch"
    }
}

Modüler JavaScript yazmak

Artık JavaScript’i modüller halinde organizleyebiliyorum:

// src/js/utils/format.js
module.exports = {
    para: function (miktar) {
        return miktar.toFixed(2) + ' TL';
    },
    tarih: function (timestamp) {
        var d = new Date(timestamp);
        return d.getDate() + '.' + (d.getMonth() + 1) + '.' + d.getFullYear();
    }
};

// src/js/app.js
var format = require('./utils/format');

document.querySelectorAll('.fiyat').forEach(function (el) {
    el.textContent = format.para(parseFloat(el.dataset.miktar));
});

Webpack bu iki dosyayı bundle.js içinde birleştiriyor. Tarayıcı yalnızca tek bir dosya indiriyor; ben ise kodu istediğim gibi bölebiliyorum.

Önceden her şey global değişkenlere bağlıydı ve sıra önemli olduğu için script etiketlerini şablonda dikkatle sıralıyordum. Bir kütüphane diğerinden önce yüklenirse hata alıyordu. Webpack ile bağımlılıklar koda gömülü; hangi sırada yüklendiğini düşünmüyorum artık.

CSS ve görselleri de Webpack ile yönetmek

Webpack’in ilginç bir yönü, JavaScript olmayan varlıkları da yükleyebilmesi. CSS loader’ı kurarak stil dosyalarını da modül olarak içe aktarmak mümkün:

npm install --save-dev css-loader style-loader

// webpack.config.js içinde loader ekliyorum
{
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader']
}

// app.js içinde CSS'i require edebiliyorum
require('./styles/main.css');

Bu özelliği kullanıp kullanmamak tartışılabilir; CSS’i JavaScript üzerinden yönetmeyi garip bulanlar var. Ben şimdilik yalnızca JavaScript modülleri için kullanıyorum, CSS tarafını ayrı tutuyorum.

Geliştirme sunucusu

webpack-dev-server ile Gulp’taki BrowserSync benzeri bir otomatik yenileme özelliği geliyor:

npm install --save-dev webpack-dev-server

{
    "scripts": {
        "dev": "webpack-dev-server --inline --hot"
    }
}

--hot bayrağı sayfa yenilemeden yalnızca değişen modülü güncelliyor — buna Hot Module Replacement (HMR) deniyor. Henüz tam anlamıyla kavramak için kullanmadım, ama büyük projelerde çok hızlandırabileceğini düşünüyorum.

Başlangıçtaki zorluk

Dürüst olmak gerekirse Webpack’in yapılandırma dosyası ilk karşılaşmada bunaltıcı gelebiliyor. Gulp’ta her görev düz ve sıralı okunurdu; Webpack’te loader’lar, resolve kuralları, plugin dizisi — bunları kafanızda bir arada tutmak ilk günlerde zor. İki gün boyunca sadece yapılandırmayı anlamak için döküman okudum.

Bunu aşmanın en pratik yolu mevcut bir webpack.config.js örneğini alıp üzerinde küçük değişiklikler yaparak ilerlemek. Sıfırdan yazmak yerine çalışan bir yapıyı anlayarak öğrenmek çok daha hızlıydı.

Gulp’u tamamen bıraktım mı?

Hayır, henüz değil. Webpack JavaScript modülleri için harika, ama bazı görevler için hâlâ Gulp kullanıyorum: Sass derleme, görsel optimizasyonu, PHP dosyalarını izleyerek tarayıcı yenileme. Bu iki araç çakışmıyor; birlikte kullanmak mümkün.

Yeni projelerde Webpack’i doğrudan JavaScript için kuruyorum; Gulp’u sıfırdan kurmak için artık daha az neden var. Özellikle modül bağımlılığı olan her JavaScript projesi için Webpack, Gulp’tan daha doğru seçim gibi görünüyor.

Yapılandırma dosyası başta biraz karmaşık geliyor, bunu kabul etmek gerekiyor. Ama bir kez oturttuktan sonra modüler JavaScript yazmanın konforu, bu başlangıç maliyetini fazlasıyla karşılıyor.