WEBPACK NEDİR ?
Webpack adında da anlaşılacağı üzere bir web paketleyicisidir. En temel haliyle ele aldığımızda modern Javascript uygulamaları için üretilen bir module bundler’dır. Webpack, bir projede çalıştırıldığında projenin ihtiyaç duyabileceği her modül tipini alan bir bağımlılık grafiği oluşturur ve bu grafiğin işlenmesi sonucu çıktı olarak bir uygulama paketi üretir.
MODULE NEDİR ?
Bir yazılım işlev bazında kendi başına çalışabileceği parçalara bölündüğünde oluşan her parça modül olarak nitelendirilir. Her modül bütün bir programın özel bir fonksiyonundan sorumludur.
Bu sayede code-splitting gibi kod ayırma teknikleriyle uygulamanın daha performanslı çalışabileceği gibi, aynı zamanda da modüller sayesinde uygulamanın test edilmesi ve bakımı da daha kolay hale gelmektedir. Node.js, neredeyse kuruluşundan beri modüler programlamayı desteklese de, Web’de varsayılan olarak modüler yapıların desteklenmesi ise Node.js’ten çok daha sonra gerçekleşmiştir. Bu süre zarfında modüler JavaScript programlamayı gerçekleştirmek için pek çok farklı araç ortaya çıkmıştır. Bu araçlardan edinilen deneyimleri bünyesine katan Webpack, herhangi bir projede modüler yapının oluşmasına olanak sağlamaktadır.
WEBPACK MODÜLÜ NEDİR ?
Node.js modüllerinin aksine, webpack modüllerinde modüller arası bağımlılıklar farklı şekillerde ifade edilebilir. Örneğin;
• ES2015’teki import ifadesi
• CommonJS’teki require() ifadesi, (Commonjs node.js’in modül mantığıdır modül mantığıdır : module.exports, module.require() vs. gibi)
• AMD Modülleri
• Assetler(font, icon vs.)
• WebAssembly Modülleri
Bu modüllere ek olarak Webpack, loader’lar aracılığıyla Javascript haricindeki diğer dilleri ve babel gibi preprocessor’leri de desteklemektedir. Loader’lar webpackte varsayılan olarak bulunmayan diğer modüllerin nasıl işleneceğini ve nihai olarak nasıl uygulamaya dahil edilebileceğini belirtir. Webpack topluluğu pek çok farklı dil ve dil işleyicileri için loader’lar oluşturmuştur. Bu loaderlara örnek verecek olursak,
• CoffeeScript
• TypeScript
• ESNext
• Sass
• Less
• Stylus
• Elm
• Ek olarak pek çok farklı loader da bulunmaktadır.
Webpack, ES5 uyumlu olan tüm tarayıcıları desteklemektedir (IE ve altında desteği yoktur). Bunun nedeni ise import ifadeleri için Webpack’in Promise’e olan ihtiyacından dolayı kaynaklanmaktadır. Daha eski tarayıcıların desteklenmesi için import ifadesinin kullanımından önce bir polyfill yüklenmesi gereklidir.
WEBPACKTEKİ TEMEL KAVRAMLAR
Webpack’te, bir projeyi bundle haline getirmek için Webpack’in 4.0.0 sürümünden beri bir config dosyası oluşturmaya gerek kalmasa da, kendi yapılandırma dosyanızı oluşturmak istediğinizde webpack’in temel kavramlarına aşina olmanız gereklidir. Bunlar;
• Entry (başlangıç noktası)
• Output (çıktı noktası)
• Loaders (yükleyiciler)
• Plugins (eklentiler)
• Mode (PROD ve DEV modları)
• Browser Compatibility (tarayıcı uyumluluğu) şeklindedir.
