Webpack, ön yüz geliştiricileri tarafından yürütülen çalışmaları tek bir javascript dosyasında toparlayan NodeJS tabanlı paketleyicidir.  Büyük boyutlu dosyaları, paketleri derler, minimize eder. Kısaca, bir modül paketleyicidir. 

Webpack nasıl çalışıyor?

Hangi dosyanın projeye girip çıktığını yönetmek için bir kılavuza ihtiyaç duyar.

Entry:  Çalışmaya başlamadan önce ihtiyaç duyduğu giriş dosyalarının tanımlandığı alandır. Projede kullanılan Dependency’leri yani bağımlılıkları gösterir ve yüklenmesi gereken Package’lerin proje yolunu tutar.

entry: {
  index: ‘./src/index.js’
}

Output: Girdilerleri alıp okuyup işledikten sonra bir çıktı dosyası oluşturmak için (genelde build/dist gibi isimler verilir) kullanılan alandır.

output: {
  filename: 'bundle.js',
  path: '/dist'
}

Loaders: Projenin bağımlılıkları arasına dahil edilen JSON ve JS hariç diğer dosya türlerini de işleyebilmek için modüler hale dönüştürür.

Plugins: Loaders’ların yeterli gelmediği bazı işlerde kullanılır. Asset management(dosya yönetimi), bundle minimization(dosya küçültme işlemi), optimizasyon gibi birçok görevi yerine getirebilir.

Mode: Kaynak kodunun amacına yönelik aşamayı tanımlar. Üç ana aşama mevcuttur: None, Development ve Production.
Production modu kodun optimize edilmiş halini, development modu geliştirme yaparken kullandığımız optimize edilmemiş halini işaret eder.

Browser Compatibility: Webpack tarafından desteklenmeyen browser’larda yürütülecek işlemler tanımlanır.

Webpack ile Yeni Bir proje Yaratmak

Örnek bir proje dizini oluşturup dizin içerisine erişiyoruz.

mkdir ProjeAdi
cd ProjeAdi

Bağımlılıkları içeren kılavuz dosya package.json dosyasını oluşturmak için

npm init -y

Webpack yüklemek için

npm install — save-dev webpack webpack-cli

webpack.config.js dosyasında girdi klasörü olarak src, çıktı olarak ise dist ayarlıyoruz.

module.exports = {
   entry: {
       index: './src/index.js'
   },
   output: {
       filename: 'bundle.[chunkhash].js',
       // chunckhash -> webpack çalıştığında ortaya çıkacak olan dosyanın her seferinde farklı bir hash id ile çıkmasını sağlamaktadır.
       path: __dirname + '/dist'
       // dist klasörü altında directory name ile dosyaların oluşmasını sağlamaktadır.
   }
}

Komut yorumlayıcısını proje klasörüne getirip aşağıdaki komut çalıştırıldığında index.js dosyası derlenip dist klasörüne main.js olarak kaydetmek için

webpack

Webpack ile React projesi geliştirmek
Bunun için babel present’inde yüklenmesi gerekir. Bunun için

npm install @babel/preset-react --save-dev

babel.config.json dosyası içerisinde aşağıdaki gibi babel’i yapılandırabilirsiniz.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

React’ın çalışabilmesi için react ve react-dom kütüphanelerini de eklenmelidir.

npm install react react-dom