Webpack Nedir? Kurulumu ve Kullanımı

Yazıda webpack nedir ile webpack anlatılmış, webpack kurulumu yapılmış ve çeşitli webpack modülleri kullanılarak webpack kullanımı ile ilgili bilgiler verilmiştir.

Webpack nedir?

Webpack web uygulamalarında kullanılan JavaScript dosyalarını tek parça haline getirmek için kullanılan modül paketleyicisidir.

Kullanılan çoğu JavaScript uygulaması başka JavaScript dosyalarında yer alan kütüphaneye ihtiyaç duyar.

JavaScript dosyalarının artması beraberinde web sayfalarının yavaş açılmasına neden olur.

Bu yavaşlığın önüne geçebilmek için JavaScript dosyalarının birleştirilmesi gerekir.

JavaScript dosyalarını birleştirmek için Grunt, Gulp veya çeşitli web araçları kullanılabilir.

Ancak bu araçlar tüm JavaScript dosyalarını aralarındaki ilişkiyi bakmadan sırayla birleştirir.

Webpack birleştirme işini JavaScript dosyaları arasındaki ilişkiye CommonJS, AMD, ES6 Module vb. kullanarak yapar.

Webpack için geliştirilen loaders ve plugins kullanılarak SASS derlemesi, TypeScript derlemesi vb. ön işleme işlemleri de yapılır.

Webpack kurulumu

Webpack kurulumu için bilgisayarınızda Node.js ve NPM aracının kurulu olması gerekir.

Detaylı bilgiye Node.js Kurulumu ve Node.js NPM Paket Yöneticisi yazısından ulaşabilirsiniz.

Webpack kurulumu ve webpack komutunun komut yorumlayıcısında çalışması için öncelikle webpack ve webpack-cli modüllerinin yüklenmesi gerekir.

npm install webpack webpack-cli -g

Projede kullanılan modüllerin bağımlılığını eklemek için NPM aracı ile package.json dosyasının oluşturulması faydalı olacaktır.

Proje için package.json dosyasını adım adım oluşturmak için

npm init

komutu veya hızlıca oluşturmak için

npm init -y

komutu kullanılır.

Webpack ve Webpack modüllerin package.json dosyasına geliştirici bağımlılığı olarak eklenmesi taşınabilirlik için faydalı olacaktır.

npm install webpack webpack-cli --save-dev

Webpack kullanımı

Webpack, Webpack 4 sürümü ile birlikte sıfır ayar ile çalışabilme olanağına sahiptir.

Webpack varsayılan olarak src klasöründe yer alan index.js dosyasını işler.

Aşağıdaki kodları proje içindeki src klasörüne mesaj.js olarak kaydedin.

module.exports = 'Merhaba Webpack';

Aşağıdaki kodları proje içindeki src klasörüne index.js olarak kaydedin.

const mesaj = require('./mesaj');
//veya
//import mesaj from './mesaj';
console.log(mesaj);

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 kaydedilecektir.

webpack

Derleme işlemi sonrasında çıktıyı farklı bir yere kaydetmek için -o parametresi kullanılabilir.

webpack -o bundle.js

Dosya artık proje dizinine bundle.js olarak kaydedilecektir.

Her değişiklik sonrası derleme işleminin yapılması için ayrıca -w komutu da kullanılabilir.

webpack -o bundle.js -w

Webpack dosya üzerinde her değişiklik yapıldığında derleme işlemini yapacak ve proje klasörüne bundle.js olarak kaydedecektir.

Geliştirilen projeler bazen daha karmaşık ayarlara ihtiyaç duyabiliyor. Bu durumda ayarların bir dosyada saklanması faydalı olacaktır.

Webpack çalıştırıldığında varsayılan olarak (varsa) proje klasöründe yer alan webpack.config.js dosyasındaki ayarları okur.

Webpack ayarları webpack.config.js içerisinde Node.js Modül Yazmak yazısında açıklandığı gibi aşağıdaki kodlarla yazılır.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  watch: true
};

Webpack ayarlarındaki mode işlem türünü, entry işlenecek dosyaları output ise çıktının nereye aktarılacağını, watch ise değişiklik takibi ile ilgili bilgileri alır.

Webpack loaders

Webpack için geliştirilmiş olan loaders yapıları SASS, LESS, ES6, TypeScript, Coffee gibi çevrim gerektiren işlemleri yapmaya imkan sağlar.

Webpack loaders kullanımı için öncelikle loaders modülünün ihtiyaç duyduğu modüllerin indirilmesi gerekir.

Gerekli modüller indirildikten sonra loaders ile ilgili ayarlar webpack.config.js dosyasına yazılarak webpack tarafından işlenmeye hazır hale getirilir.

Babel loaders

Modül güncel JavaScript komutlarını eski tarayıcılara uyumlu hale getirir.

İlk olarak gerekli modüller indirilir.

npm install babel-loader babel-core babel-preset-env --save-dev

Modüller indirildikten sonra loaders ile ilgili ayarlar webpack.config.js içerisine yazılır.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  watch: true,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['babel-preset-env']
          }
        }
      }
    ]
  }
};

Projede kullanılan loaders ayarları module içindeki rules bölümüne yazılır.

Kural içinde yer alan test işlenecek dosyalarla ilgili düzenli ifadeyi, include işlenecek klasörü, exclude işlenmeyecek klasörü ifade eder.

Kural içerisinde yer alan use alanı ise test, include, exclude ile belirlenen dosyalar için hangi loaders ve ayarlarının kullanılacağını ifade eder.

NOT: Modülün detaylı açıklama ve parametrelerine modül sayfasındaki dokümantasyondan ulaşabilirsiniz.

SASS loaders

Modül SASS kodlarını CSS kodlarına çevirmek için kullanılır.

İlk olarak gerekli modüller indirilir.

npm install sass-loader node-sass --save-dev

Modül css-loader ve style-loader modüllerine ihtiyaç duyduğundan bu modüllerde indirilir.

npm install style-loader css-loader --save-dev

Aşağıdaki SASS kodlarının proje klasörü içindeki src klasörüne stil.scss olarak yazıldığını varsayalım.

$bg-color: seagreen;
$default-font: arial, verdana;

body {
  background-color: $bg-color;
  font-family: $default-font;
}

SASS kodlarını çevirmek için gerekli olan ayarları webpack.config.js içine yazalım.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  watch: true,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['babel-preset-env']
          }
        }
      },
      {
        test: /\.scss$/,
        use:[
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

Modül style-loader, css-loader modüllerine ihtiyaç duyduğundan bu modüllerde kullanıldı.

SASS dosyaları, JavaScript dosyaları gibi projeye dahil edilip kullanılır.

import mesaj from './mesaj';
require('./arkaplan.scss');
document.body.innerHTML = mesaj;

NOT: Modülün detaylı açıklama ve parametrelerine modül sayfasındaki dokümantasyondan ulaşabilirsiniz.

Webpack içindeki loaders yapılarının kullanımı genel olarak aynıdır.

Diğer modüllere aşağıdaki adresten ulaşabilirsiniz.

webpack.js.org/loaders/

Webpack dev server

Webpack dev server webpack işlemlerini yapar ve geliştirilen uygulama için bir web sunucusu oluşturmaya imkan verir.

npm install webpack-dev-server -g

Aşağıdaki komut ile webpack dev server derleme işlemini yapar ve bir sunucu oluşturur.

webpack-dev-server

Webpack dev server ile ilgili varsayılan ayarları değiştirmek için webpack.config.js dosyasına yeni ayarlar eklenebilir.

module.exports = {
  //... diğer ayarlar
  devServer: {
    port: 1453,
    index: 'index.html',
    open: true
  }
};

Webpack ayar dosyasının iyi hazırlanması tekrar kullanım için faydalı olacaktır.