Webpack Nasıl Kurulur ve Kullanılır? Her Geliştirici İçin Adım Adım Rehber

Bir zamanlar, frontend geliştirme dünyasında işler oldukça karmaşıktı. JavaScript dosyalarınız bir kenara, CSS, görseller, fontlar ve daha birçok öğe de her bir projeye dahil oluyordu. Bir sayfayı oluşturduğunuzda bu dosyaların tümünü bir araya getirmek, derlemek ve optimize etmek neredeyse imkansız bir iş gibi görünüyordu. Ancak işte tam burada Webpack devreye girdi.

Webpack, önceden karmaşık olan bu işleri kolaylaştırmak için tasarlanmış güçlü bir modül bağlayıcısıdır. Peki, Webpack'i nasıl kurarız ve projelerimizde nasıl kullanırız? Haydi, adım adım bu maceraya dalalım!

Peki, Webpack'i kullanarak projelerimizde daha hızlı ve verimli bir geliştirme deneyimi nasıl elde ederiz? İşte ilk adımlar…

#### 1. Adım: Projeye Başlayın
Eğer sıfırdan bir proje oluşturuyorsanız, önce bir proje dizini oluşturun ve bu dizine gidin. Ardından `npm init` komutunu çalıştırarak proje için bir package.json dosyası oluşturun. Bu dosya, projenizin tüm bağımlılıklarını ve yapılandırmalarını içerir.

```bash
mkdir benim-webpack-projem
cd benim-webpack-projem
npm init -y
```

```bash
npm install --save-dev webpack webpack-cli
```

Bu komut, Webpack ve Webpack CLI’yi yalnızca geliştirme ortamında kullanılacak şekilde (devDependency) kuracaktır.

Bir `webpack.config.js` dosyası aşağıdaki gibi görünebilir:

const path = require('path');

module.exports = {
  entry: './src/index.js', // Giriş dosyanız
  output: {
    filename: 'bundle.js', // Çıktı dosyası
    path: path.resolve(__dirname, 'dist') // Çıktı dizini
  }
};

Burada, `entry` alanı Webpack’e hangi dosyadan başlatması gerektiğini söyler (genellikle `index.js`). `output` ise Webpack’in çıktıyı nereye ve nasıl kaydedeceğini belirler.

```bash
npx webpack --config webpack.config.js
```

Bu komut, Webpack’in belirttiğiniz giriş dosyasından başlayarak tüm bağımlılıkları paketlemesini sağlar. Sonuç olarak, `dist` klasöründe bir `bundle.js` dosyası oluşturulur.

#### 1. Adım: webpack-dev-server Kurulumu
webpack-dev-server’ı yüklemek için şu komutu kullanabilirsiniz:

```bash
npm install --save-dev webpack-dev-server
```

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist',
    open: true // Tarayıcıyı otomatik olarak açar
  }
};

```bash
npx webpack serve --config webpack.config.js
```

Bu komut ile geliştirme sunucusu çalışmaya başlar ve her değişiklikte sayfanız otomatik olarak yenilenir.

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js', // Her modül için ayrı dosya
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all', // Tüm modülleri böler
    }
  }
};

Bu yapılandırma ile Webpack, bağımlı dosyaları farklı bundle’lar halinde bölecek ve sayfa yükleme hızını artıracaktır.

Webpack ile işler çok daha kolay ve hızlı hale gelecek. Kodu modüller halinde paketlemek, optimize etmek, hızlıca geliştirme sunucusuna erişmek ve hatta sadece ihtiyaç duyduğunuz dosyaları yüklemek gibi birçok avantajı keşfettiniz. Şimdi, sıra sizde! Webpack’i projelerinizde kullanmaya başlayın ve geliştirme dünyasında fark yaratın.