Webpack Loader ile Çalışmak

Bu video, Webpack projelerinde farklı dosya tiplerini (CSS, SCSS, görseller, fontlar ve JavaScript) işlemek için Loader yapılandırmasının nasıl kullanılacağını detaylı bir şekilde açıklamaktadır. Temel olarak, dosyaları tarayıcıların anlayabileceği formata dönüştüren ve modüllere entegre eden bu araçların önemi vurgulanmıştır.

Videonun önemli başlıkları ve konuları:

• Loader Nedir? (0:12 - 0:59): Webpack'te dosyaları ön işleme tabi tutan, onları modüllere dahil etmeyi veya çıktı olarak vermeyi sağlayan araçlardır.
• CSS ve SCSS Yükleme (1:16 - 2:49): sass-loader, css-loader ve style-loader paketlerinin rolleri anlatılıyor. SCSS dosyalarının CSS'e dönüştürülmesi ve DOM'a nasıl ekleneceği gösteriliyor.
• Babel Kullanımı (2:51 - 3:54): Modern JavaScript (ES6+) kodlarını tarayıcı uyumlu ES5 sürümüne dönüştürmek için babel-loader entegrasyonu ele alınıyor.
• Dosya ve URL Yönetimi (3:55 - 4:51): Webpack 5 ile gelen Asset Modülleri (asset/resource, asset/inline) sayesinde görsellerin ve fontların nasıl yönetildiği anlatılıyor.
• HTML Loader (4:52 - 5:13): HTML dosyalarının Webpack süreçlerine nasıl dahil edildiği açıklanıyor.
• Uygulamalı Yapılandırma (6:15 - 14:38): webpack.config.js dosyası üzerinden tüm bu kuralların (rules) nasıl tanımlandığı, npm run build ile projenin nasıl derlendiği ve dist klasörüne nasıl çıktılar alındığı örnekleniyor.