Hello Webpack!

Published in

Front-End Developer

5 min readJul 17, 2019

Static module bundler for modern JavaScript applications.

Webpack birden fazla varlık dosyasını (js, css, imaj, font vb.) tek ya da daha fazla dosyaya dönüştüren bir paketleyicidir. Güncel tarayıcıların anlık istek kapasitesi limitli (en fazla 6 dosya) olduğu için eğer websitenizde çok fazla varlık dosyası bulunuyorsa indirilmesi zaman alacaktır. Webpack’in asli görevlerinden biri varlık dosyalarınızın sayısını azaltmak ve böylece sitenizin hızlı indirilmesini sağlamaktır. Ayrıca bundle sırasında kullanılmayan atıl dosyaları Webpack göz ardı eder. Bu sayede kullanılmayan kod parçalarının trafik oluşturmasının önüne geçmiş oluruz.

Bunun yanı sıra Webpack gerekli derleme, sıkıştırma işlerini de yapabilir. Bu sayede TypeScript, ES6, ES7 dosyalarınız ES5 formatına; SCSS, LESS, Stylus dosyalarınız ise CSS formatına derlenecektir.

✅ Webpack 2. sürümünden itibaren ES6 derlemek için harici bir modüle ihtiyaç duymamaktadır.

Kurulum

👉🏻 Webpack kullanmak için öncelikle bilgisayarınızda Node.js’in kurulu olması gerekiyor. Böylece NPM modülleri kullanabiliriz.‌

👉🏻 Eğer proje dosyanızda package.json dosyası yoksa oluşturmak için aşağıdaki komutu kullanabilirsiniz.

npm init -y# -y yerine uzun şekilde --yes yazılabilir.
# Eğer manuel yapılandırma yapmak istiyorsanız "-y" etiketini kaldırabilirsiniz.

👉🏻 Artık bir package.json dosyasına sahip olduğumuza göre aşağıdaki komut ile Webpack’i geliştirme ortamımız için kurabiliriz.

npm i -D webpack# Ben kısaltmaları kullanmayı seviyorum, siz uzun uzadıya kullanmak isterseniz:
# i  -> install
# -D -> --save-dev

⚠️ Webpack’i “-D “ yerine “-g “ Etiketi ile global olarak da kurabilirsiniz ancak bunun önerilen bir uygulama olmadığını unutmayın. Global olarak yüklediğinizde, sizi web paketinin belirli bir sürümüne kilitler ve farklı bir sürüm kullanan projelerde problem yaşamanıza neden olabilir.

👉🏻 Eğer CLI araçlarını benim gibi kullanmayı seviyorsanız Webpack’in CLI aracını kurabilirsiniz.

npm i -D webpack-cli

🔎 Webpack-cli kullanımı hakkında daha fazla bilgiye ulaşmak için aşağıdaki bağlantıyı inceleyebilirsiniz.
https://webpack.js.org/api/cli/
⚠️ İlk yüklemenin ardından “webpack” komutunu çalıştırdığımda “command not found: webpack” uyarısı aldım. Problemi çözmek için aşağıdaki komutu çalıştırmam gerekti;
export PATH="$(npm bin):$PATH"

‌Aslında kurulum tamamlandı. Webpack 4. sürümden itibaren herhangi bir konfigürasyon dosyasına ihtiyaç duymadan çalışabiliyor. Ancak çoğu proje daha karmaşık bir kuruluma ihtiyaç duyduğu için Webpack bu konfigürasyon dosyasını tabiki destekliyor. O zaman geriye yapılandırma için son bir konfigürasyon dosyası eklemek kaldı. İsterseniz bunun için CLI aracını kullanabilirsiniz. Ben detaylandırmak için bu dosyaları manuel oluşturacağım.

👉🏻 Bunun için root dizinde webpack.config.js isimli bir dosya oluşturuyoruz (Bu isim Webpack için varsayılan olduğu için tanımlamaya gerek kalmıyor). Ardından ilk iş olarak girdi/çıktı değerlerini aşağıdaki gibi doldurmaya başlıyoruz.

Yukarıdaki konfigürasyon dosyasında, kök dizinde bulunan index.js isimli dosyayı bundle ederek yine kök dizine bundle.js isminde yeni bir dosya oluşturmasını sağlıyoruz.

‌İçerisinde console.log olan basit bir index.js dosyası oluşturduktan sonra komut satırında webpack komutunu çalıştırarak uygulamanın çalıştığını (yeni bir bundle.js dosyası oluşturduğunu) test edebilirsiniz. Komutu çalıştırdıktan sonra aşağıdaki gibi bilgilendirme mesajıda göreceksiniz.

➜  YOUR_PROJECT_NAME webpack
Hash: ff79b65e89f62fb0f981
Version: webpack 4.35.3
Time: 298ms
Built at: 07/16/2019 9:57:27 AM
    Asset        Size  Chunks             Chunk Names
bundle.js   957 bytes       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./index.js 55 bytes {0} [built]

Testimizi başarıyla tamamladığımıza göre kurulumumuz tamamlanmıştır 👏🏻🎉 Şimdi sıra konfigürasyon dosyasını iyileştirmekte.

Konfigürasyon

Konfigürasyon dosyasını TypeScript, CoffeeScript, Babel ve JSX ile de oluşturabilirsiniz. Bu konu ilginizi çektiyse aşağıdaki bağlantıyı incelemenizi tavsiye ederim.

https://webpack.js.org/configuration/configuration-languages/

✅ Eğer herhangi bir nedenle birden fazla konfigürasyon dosyası kullanmak isterseniz, bunu — config etiketi ile yapmanız mümkün. Örnek:
webpack --config prod.config.js

‌Öncelikle konfigürasyon parametrelerine hızlıca bir göz atalım.

✏️ Entry

Girdileri tanımladığımız parametre. Yukarıda yaptığımız ilk örnekten zaten aşinayız 😉

Eğer birden fazla girdiniz olacaksa aşağıdaki gibi tümünü tanımlamak mümkün;

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  },
  ...
};

✅ Eğer JS dosyaları birbirleri içerisinde çağrılıyorsa bunları ayrı ayrı tanımlamanıza gerek yok. Webpack bağımlılıkları olan dosyaları sizin için zaten bundle edecektir.
Daha fazla bilgi için Dependency Graph’ı inceleyebilirsiniz.

‌✏️ Output

Çıktıyı (ya da çıktıları) tanımladığımız parametre. En az iki değeri tanımlamamız gerekiyor. Bunlar çıktı dosyasının olması gereken dizinin tanımlandığı path ve çıktı dosyasının isminin tanımlandığı filename’dir.

const path = require('path');module.exports = {
  ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

🔎 Bu bölümü biraz kısa kesmiş olabilirim 😁Daha fazlası için; https://webpack.js.org/concepts/output/

✏️ Mode

Çıktının geliştirme ortamı için okunabilir biçimde mi yoksa yayınlamak için sıkıştırılmış biçimde hazırlanacağını tanımladığımız parametre. Alacağı değerler aşağıdaki gibi olabilir:

module.exports = {
  ...
  mode: "production"
}// mode: "production", // enable many optimizations for production builds
// mode: "development", // enabled useful tools for development
// mode: "none", // no defaults

Varsayılan değeri production 'dır.

Mode parametresini konfigürasyon dosyası içerisine yazmadan, komut satırından da yönetmek mümkün. Hatta bu yöntem daha çok tercih ediliyor.

webpack --mode production# 'webpack --mode production' yerine kısaca 'webpack -p' kullanabilirsiniz.
# 'webpack --mode development' yerine kısaca 'webpack -d' kullanabilirsiniz.

✏️ DevServer

Webpack içerisindeki girdi dosyalarında herhangi bir değişiklik yapıldığında, bu değişikliklerin algılanması ve oluşturulan bundle dosyasının test edilmesi için tarayıcıda HTML dosyasının açılmasını devServer ile sağlıyoruz. Ayrıca değişiklik yapıldığında sunucuyu baştan çalıştırmak zorunda da kalmayacağız. 😎

DevServer’ı kullanmak için önce npm aracılığı ile kurulum yapmamız gerekecek. Bunun için aşağıdaki komutu çalıştırabilirsiniz.

npm i -D webpack-dev-server

Konfigürasyon dosyamızda ilgili dizini aşağıdaki gibi tanımlıyoruz …

module.exports = {
  ...
  devServer: {
    contentBase: './dist'
  }
}

… ve aşağıdaki komut ile localhost’u ayağa kaldırıp bizim için tarayıcıyı açmasını sağlayabiliriz.

webpack-dev-server --mode development --open

✏️ Loaders

Webpack dosyaları içe aktarırken (ya da yüklerken) önceden işlemek için loader’ı kullanır. Loader dosyaları farklı bir dilden (TypeScript vb.) JavaScript’e dönüştürebilirler. Ayrıca doğrudan JavaScript modüllerinden CSS dosyalarını içe aktarma gibi işlemleri de yapmanızı sağlar.

✅ Sadece geliştirme ortamında loader’lara ihtiyaç duyacağınız için kurulumu
-D etiketi ile yapabilirsiniz.

Yukarıda benim kullandığım bazı loader’ları listeledim. Daha fazlasına aşağıdaki bağlantıdan ulaşabilirsiniz.‌

https://webpack.js.org/loaders/

✏️ Plugins

Template engines, CSS preprocessors, Babel, TypeScript ve/veya HTML içeriklerini dinamik olarak oluşturmak için çeşitli pluginlere ihtiyaç duyuyoruz. Bazılarından aşağıda bahsedeceğim ancak aşağıdaki bağlantıdan çok daha fazlısını inceleyebilirsiniz;

https://webpack.js.org/plugins/

🔌 HTML Webpack Plugin

npm i -D html-webpack-pluginconst HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html'
    })
  ]
}

Browser Compatibility

Webpack, ES5 uyumlu tüm tarayıcıları destekler (IE8 ve altını desteklenmez). Webpack import () ve request.ensure () için Promise ihtiyaç duyar. Daha eski tarayıcılara destek vermek istiyorsanız, bu ifadeleri kullanmadan önce bir polyfill yüklemeniz gerekir.

NPM Scripts

Komut satırını kullanarak yukarıda bir kaç kez webpack ve webpack-dev-server komutlarını farklı etiketler ile çalıştırdık. İşi biraz daha optimize hale getirmek için 'package.json' dosyasını aşağıdaki gibi düzenleyebiliriz;

{
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  }
}‌

Hazırladığımız bu 3 script’i yine komut satırında aşağıdaki gibi kullanmak mümkün;

npm run dev
# Bundle işlemi geliştirme ortamı için oluşturacaknpm run build
# Bundle işlemi production ortamı için sıkıştırılmış olarak oluşturacaknpm run start
# dist dizini localhost:8080 portunda ayağa kalkacak