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.jsimport bar from './bar';bar();// src/bar.jsexport 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.jsconst 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.