Webpack.js nedir?

Yazdığımız uygulamaların çalışması ve yayınlanması için dosyaların bir dizi işlemden geçmesi gerekir. Compile, Linting yada Uglify gibi bu işlemleri yapıp projedeki assetleri compile edip, paketleyip ve sıkıştırıp servis eden bir ara katman olarak açıklayabilirim. Örnek olarak iki dosyamız olsun.

// src/index.js
import bar from './bar';
bar();
// src/bar.js
export default function bar() {
  //
}

Webpack config dosyasında hangi dosyadan paketlemeye başlayacağını entry bölümünde tanımlıyoruz. Output kısmında dosyaların oluşturulacağı klasörü ve en sonunda oluşacak dosyanın ismini yazıyoruz. Burada sonradan değiştirebileceğimizi unutmamamız gereken iki şey var. Birincisi birden fazla entry ve output olabilir. İkincisi bir entry olsa bile async componentler ve service worker kullanımından dolayı birden fazla bundle dosyası oluşabilir.

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

Loaders

Loaderlar olmadan Webpack sadece js ve json dosyalarını yükleyebilmekte. enforce: “pre” özelliği kullanılarak bazı loaderların önce çalışması sağlanabilir. Birden fazla loader tanımlanması halinde sondan başlanarak yüklenmeye başlanır.

Kullandığım bazı loaderlar.

eslint-loader

Dosyaları bir sonraki loadera vermeden önce lint işleminden geçir.

babel-loader

ES6 kodları compile ederek js konuda dönüştür.

html-loader

Html dosyalarını yükler.

css-loader ve style-loader

Css dosyalarını yükler

url-loader

Url den gelen assetleri yükler.

worker-loader

Worker dosyalarını yükler.

Plugins

İhtiyacımız olacak gelişmiş tasklar için pluginler mevcut. Html dosyası oluşturma, favicon oluşturma, dist klasörünü temizleme ve Oluşturduğunuz Bundle’ı analiz edebileceğiniz pluginler mevcut.

const HtmlWebPackPlugin = require("html-webpack-plugin");
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer');

Başka bir makalede react ile webpack kullanımını yazacağım.