Webpack Plugin ile Çalışmak

Bu video, Webpack projelerinde geliştirme ortamını ve uygulama yeteneklerini geliştirmek için kullanılan dört temel eklentiyi (plugin) ele almaktadır. Mert Özen, eklentilerin uygulamanın yeteneklerini nasıl genişlettiğini ve ihtiyaç duyulduğunda nasıl kullanılması gerektiğini vurgular (0:15 - 1:45).

Video boyunca incelenen eklentiler:

• HtmlWebpackPlugin: Webpack ile otomatik bir index.html dosyası oluşturmak veya mevcut dosyayı özelleştirmek için kullanılır (1:50).
• CleanWebpackPlugin: Her derleme öncesinde eski dosyaları kaldırarak çıktı klasörünü (dist) temiz tutar (2:30).
• MiniCssExtractPlugin: CSS dosyalarını JavaScript'ten ayırıp harici bir CSS dosyası olarak dışarı aktarır; bu, projenin performansını ve yönetimini kolaylaştırır (3:05).
• DefinePlugin: Webpack içinde yerleşik olarak gelir ve uygulama genelinde global değişkenler (örneğin API anahtarları veya ortam değişkenleri) tanımlamak için kullanılır (3:40).

Eğitmen, bu eklentilerin nasıl kurulacağını ve webpack.config.js dosyasında nasıl yapılandırılacağını uygulamalı örneklerle gösterir (4:15-9:50). Ayrıca, geliştirme ve üretim (production) modları arasındaki farklara ve dosya sıkıştırma (minify) işlemlerine de değinir.