Adı : Webpack Nedir ve Nasıl Kullanılır?

Webpack, front-end geliştiricilerinin Javascript, CSS ve HTML gibi dosyaları, module formatında birleştirerek, tek bir dosya haline getirebilmesine olanak sağlayan bir Javascript modülleştirme aracıdır. Bu birleştirme işlemi sırasında, webpack, bağımlılık yönetimi, load balancer ve verimli bir optimizasyon sağlar. Bu sayede projelerde performans ve ölçeklenebilirlik açısından büyük bir kolaylık sağlanmaktadır.
Webpack, kapsamlı ve esnek bir yapıya sahip olduğu için, büyük projelerin yanı sıra, küçük uygulamalardaki ihtiyaçları da karşılayabilir.
Webpack, Türkçe kaynaklara sık rastlanmadığı için, kısaca webpack’i özetleyelim ve örnekler üzerinden daha iyi anlamaya çalışalım.
Webpack İlk Adımlar
Webpack’in kurulumu için, öncelikle Node.js’nin sisteminizde yüklü olması gerekiyor. Node.js’i indirdikten sonra, aşağıdaki komutu terminale yazarak webpack’i kurabilirsiniz:
```
npm install webpack webpack-cli --save- dev
```
Bu komutla, webpack ve webpack-cli paketleri yüklenecektir. Webpack’in bu iki paketi gerektirmesinin nedeni, webpack’in komut satırından çalıştırılabilmesi için webpack-cli paketine ihtiyaç duymasıdır.
Webpack Kullanımı
Webpack kullanımı için, öncelikle projemizin ana dizininde bir webpack.config.js adında bir dosya oluşturmamız gerekiyor.
Bu dosyada, modüllerin nereden başlayacaklarını (entry), nereye çıkacaklarını (output) ve hangi yükleme araçlarını (loader) kullanacağımız gibi ayarlar tanımlanır.
Örneğin, basit bir uygulama için, yapılandırma ayarları aşağıdaki gibi olabilir:
```
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\\.js$/, exclude: /node_modules/, use: {
loader: \"babel-loader\"
} },
{ test: /\\.css$/, use: [
'style-loader',
'css-loader'
]},
{ test: /\\.(png|svg|jpg|gif)$/, use: [
'file-loader'
]},
]
}
};
```
Bu yapılandırma ayarlarına göre, projemizdeki tüm JavaScript dosyaları, ./src/index.js’den başlayarak toplanır. Bu dosyalar derlendikten sonra oluşturulacak tek bir dosyanın adı ‘bundle.js’ ve bu dosya, ./dist dizinine kaydedilecektir.
Ayrıca, yapılandırma ayarları, .js dosyalarının Babel kullanarak derlenmesi, .css dosyalarının style-loader ve css-loader kullanarak kümeleştirilmesi ve resim dosyalarının file-loader tarafından taşınması gibi işlemleri de barındırmaktadır.
Örnek Proje
Şimdi, yaptığımız ayarları somut bir örnek üzerinde görmeye çalışalım.
Örneğin, bir ‘Hello World!’ uygulaması yapalım. Bu uygulamanın HTML dosyasında, merhaba dünya yazısı bulunacaktır.
index.html dosyası:
```

```
Projenizin ana dizininde, paket.json dosyası içinde aşağıdaki öğeler bulunmalıdır:
```
{
\"name\": \"webpack-example\",
\"version\": \"1.0.0\",
\"description\": \"\",
\"main\": \"index.js\",
\"scripts\": {
\"build\": \"webpack --config webpack.config.js\"
},
\"keywords\": [],
\"author\": \"\",
\"license\": \"ISC\",
\"devDependencies\": {
\"babel-core\": \"^6.26.3\",
\"babel-loader\": \"^7.1.5\",
\"babel-preset-env\": \"^1.7.0\",
\"css-loader\": \"^2.1.1\",
\"file-loader\": \"^3.0.1\",
\"style-loader\": \"^0.23.1\",
\"webpack\": \"^4.29.4\",
\"webpack-cli\": \"^3.2.3\"
}
}
```
Bu öğeler paketlerimizi listelemektedir. Bunları yüklemek için, komut istemcisinde aşağıdaki komutu çalıştırmalısınız:
```
npm install
```
Bu işlem tamamlandıktan sonra, yapmanız gereken tek şey, src klasörü içinde index.js ve style.css dosyaları oluşturmak ve aşağıdaki kodları eklemektir.
index.js dosyası:
```
console.log('Hello World!');
document.getElementById('hello').innerHTML = 'Merhaba Dünya!';
```
style.css dosyası:
```
body {
background-color: lightblue;
}
```
Ve bu kadar! Artık projenizin ana dizininde komut satırında aşağıdaki komutu çalıştırabilirsiniz:
```
npm run build
```
Webpack, projenizdeki tüm dosyaları kombine edecek ve oluşturulan dosyalar sonunda ./dist dizinine yerleştirilecektir. Ardından, index.html dosyasına tarayıcınızdan açabilirsiniz ve ‘Merhaba Dünya!’ yazısını görebilirsiniz.
Sık Sorulan Sorular
S.1) Webpack nedir?
Webpack, front-end geliştiricilerinin Javascript, CSS ve HTML gibi dosyaları module formatında birleştirerek, tek bir dosya haline getirebilmesine olanak sağlayan bir Javascript modülleştirme aracıdır.
S.2) Webpack’in kurulumu nasıl yapılır?
Webpack’in kurulumu için, Node.js’nin sisteminizde yüklü olması gerekiyor. Node.js’i indirdikten sonra, aşağıdaki komutu terminale yazarak webpack’i kurabilirsiniz:
```
npm install webpack webpack-cli --save- dev
```
S.3) Webpack’in kullanımı nasıl yapılır?
Webpack kullanımı için, öncelikle projemizin ana dizininde bir webpack.config.js adında bir dosya oluşturmamız gerekiyor.
Bu dosyada, modüllerin nereden başlayacaklarını (entry), nereye çıkacaklarını (output) ve hangi yükleme araçlarını (loader) kullanacağımız gibi ayarlar tanımlanır.
S.4) Webpack’in avantajları nelerdir?
Webpack’in bağımlılık yönetimi ve optimizasyon sağlaması, daha verimli projeler oluşturmanıza olanak sağlar. Öte yandan, tek bir dosya haline getirilen modüller sayesinde, web sayfalarının yüklenme hızı artırılarak, performans artırımı yapılabilir.
S.5) Webpack özelleştirilebilir mi?
Evet, Webpack özelleştirilebilir. birçok plugin ve loader ile özelleştirilebilir. Buna rağmen, büyük ve karmaşık projelerde, modüler tasarım yaklaşımını benimsemek genellikle daha faydalıdır.