Webpack Nedir?
Webpack, temelde bir *modül paketleyicisi*dir. Bir web uygulamasındaki tüm kaynak dosyalarınızı (JavaScript, CSS, HTML, resimler ve daha fazlası) bir araya getirir ve bunları optimize ederek tarayıcı için en verimli hale getirir. Webpack'i düşünürken, ona bir "bundler" yani "paketleyici" gibi de bakabilirsiniz.
Adım 1: Webpack Kurulumu
İlk olarak, Webpack'i projeye dahil etmek için birkaç basit adım izlemeniz gerekiyor. Öncelikle, projenizin kök dizininde terminali açın ve şu komutu çalıştırın:
npm init -y
Bu komut, projenizde bir package.json dosyası oluşturur. Bu dosya, projenizin bağımlılıklarını ve diğer önemli bilgilerini tutar. Şimdi, Webpack'i projeye eklemeye başlayalım.
npm install --save-dev webpack webpack-cli
Bu komut, Webpack ve Webpack CLI (komut satırı arayüzü) araçlarını projeye dahil eder. Kurulum tamamlandı!
Adım 2: Webpack Yapılandırma Dosyasını Oluşturma
Webpack'i kullanmaya başlamadan önce, projeyi nasıl paketleyeceğinizi belirlemeniz gerekir. Bunun için bir webpack.config.js dosyası oluşturmanız gerekecek. Projenizin kök dizininde bu dosyayı oluşturun ve içine aşağıdaki kodu yazın:
const path = require('path');
module.exports = {
entry: './src/index.js', // Giriş noktası
output: {
filename: 'bundle.js', // Çıktı dosyasının ismi
path: path.resolve(__dirname, 'dist'), // Çıktı dosyasının yolu
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
mode: 'development', // Mod seçimi (development/production)
};
Bu yapılandırma dosyasında, entry noktası olarak `src/index.js` dosyasını belirledik. Yani, Webpack, bu dosyayı alacak ve uygulamanın geri kalan kısmını buradan paketleyecek. output kısmı, derlenmiş dosyanın hangi isimle ve hangi dizine kaydedileceğini belirler.
Adım 3: Webpack'i Çalıştırma
Webpack'i çalıştırmak için terminalde şu komutu kullanabilirsiniz:
npx webpack
Bu komut, Webpack'i çalıştırır ve `src/index.js` dosyasını alıp dist/bundle.js dosyasına paketler. Eğer mode değerini production olarak değiştirirseniz, Webpack dosyanızı daha da optimize edecektir.
Adım 4: Webpack Dev Server ile Hızlı Geliştirme
Web geliştirme sürecinde en önemli şeylerden biri, değişikliklerinizi hızlıca görmek. İşte burada webpack-dev-server devreye giriyor. Bu araç, tarayıcınızda otomatik olarak sayfayı yeniler ve her şeyin çalıştığından emin olmanızı sağlar.
Webpack-dev-server'ı kurmak için şu komutu kullanabilirsiniz:
npm install --save-dev webpack-dev-server
Sonrasında, webpack.config.js dosyanızı şu şekilde güncelleyin:
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
open: true, // Sayfa açıldığında otomatik olarak tarayıcıyı başlatır
},
mode: 'development',
};
Artık Webpack dev server'ı başlatmak için terminalde şu komutu çalıştırabilirsiniz:
npx webpack serve
Bu komut, geliştirici sunucusunu başlatacak ve tarayıcınızda otomatik olarak açacaktır. Webpack'i her değiştirdiğinizde sayfa kendiliğinden yenilenecek!
Sonuç
Webpack'i projelerinizde kullanmak, başlangıçta biraz karmaşık gibi görünebilir. Ancak, doğru adımları takip ettiğinizde Webpack'in gücünü keşfedecek ve projelerinizin daha verimli ve hızlı çalışmasını sağlayabileceksiniz. Bu yazıda, Webpack'in temel kurulum ve kullanım adımlarını öğrendiniz. Eğer daha fazla özelleştirme ve ileri düzey kullanım istiyorsanız, Webpack'in resmi dökümantasyonuna göz atabilirsiniz.
Unutmayın, Webpack sadece bir araçtır; ona nasıl kullanacağına karar veren sizsiniz!