Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim serisinin bir bölümüdür.
- Video, webpack ile ilgili temel kurulum ve yapılandırma adımlarını kapsamlı şekilde ele almaktadır. İlk bölümde webpack projesi için gerekli paketlerin ve pluginlerin kurulumu, dosya yapısı, common.config.js dosyası oluşturma ve temel yapılandırmalar gösterilmektedir. İkinci bölümde ise CSS dosyalarının işlenmesi, imaj dosyalarının yönetimi ve hızlı band oluşturma yöntemleri anlatılmaktadır.
- Eğitim, hem lokal ortamda çalışma hem de production ortamları için farklı config dosyaları oluşturma, pluginler (clean, mini-extract, html-loader) ekleme ve projelerin nasıl çalıştırılacağı konularını içermektedir. Video, bir sonraki derste nasıl çalıştığı konusunun tekrar ele alınacağını belirterek sona ermektedir.
- Webpack Projesi İçin Dosya Yapısı
- Webpack ile ilgili kurulumlar, paketler ve pluginler hakkında bilgi verilecek.
- Proje dosyası yapısında src klasörü, içinde imaj, java, css ve sas dosyaları bulunuyor.
- Proje başlangıçta boş bir index dosyası ve bir font dosyası ile başlıyor.
- 00:53Webpack Common.js Dosyası Kurulumu
- Proje için webpack common.js dosyası oluşturuluyor.
- npm install komutu ile gerekli paketler indiriliyor.
- Common.js dosyasında requirePath ve modül export kullanılarak ortak kurallar ekleniyor.
- 02:13Modül Ekleme ve HTML Loader
- Modüllerin içinde HTML loader ile ilgili kurulum yapılıyor.
- npm install html-loader komutu ile HTML loader paketi indiriliyor.
- HTML loader, HTML ile biten dosyaları otomatik olarak yükleyecek.
- 02:53CSS ve Asset Yönetimi
- CSS dosyaları için gerekli paketler indiriliyor.
- CSS dosyalarının sıralaması çok önemli, yanlış sıralama hata verebilir.
- Webpack 5'te fileLoader kullanılmıyor, asset resource kullanılarak dosyalar hashleniyor ve uzantıları ekleniyor.
- 05:13Asset Yönetimi İçin Özel Ayarlar
- Asset yönetimi için modülün dışına eklenen bir ayar kullanılıyor.
- Asset image x.jpg yerine sadece asset image kullanılarak dosyalar tanımlanıyor.
- Bu ayarlar sayesinde dosyalar hashleniyor ve uzantıları ekleniyor.
- 06:01Development Ortamı İçin Ayarlar
- Development ortamı için gerekli paketler indiriliyor.
- Common.js dosyası import ediliyor ve webpack kullanılıyor.
- Development ortamında çalışacak dosyalar için out kutusu oluşturuluyor.
- 07:50Plugin Kullanımı ve Proje Çalıştırma
- HTML-loader plugini, HTML dosyalarının değişikliklerini takip ediyor.
- Clean plugin, dosyaları temizleyerek boş ediyor ve belirtilen porta bağlanıyor.
- npm start komutu ile proje ayağa kalkıyor ve HTML dosyası görüntüleniyor.
- 10:34Production Ortamı İçin Ayarlar
- Production ortamı için common.js dosyası oluşturuluyor.
- Clean webpack plugini, her yeni oluşturduğunda bir öncekini silmesini sağlıyor.
- Optimal plugin, CSS dosyalarını optimize etmeye yarıyor.
- 11:18Production Ortamı İçin Özel Ayarlar
- Production ortamında index dosyası için content hash kullanılıyor.
- CSS dosyaları için minify özelliği kullanılıyor.
- Production ortamında style loader kullanılmıyor çünkü ekstra CSS dosyaları minify ediliyor.
- 13:27CSS Dosyası İşlenmesi ve İmaj Yönetimi
- CSS dosyası işlendi ve eşlendi, bu sayede kullanıcılar yeni sürümlerde JavaScript ve imaj dosyalarına denk gelmeyecekler.
- Her yeni sürümde imaj dosyaları yeniden oluşturuluyor ve kullanıcılar bunları indiriyor.
- Bu yöntemle hem lokal ortamda çalışma hem de hızlı bir şekilde band oluşturma işlemi gerçekleştirildi.