Webpack’e İlk Adım
Teknoloji alanındaki yetenek açığını kapatmak, yazılım alanında gençlerin geleceklerine değer katmak için 3 yıl önce yolculuğumuza başladık. Yüzlerce gencin katılımıyla büyürken, yüzlerce gencin ürettiklerinden ve projelerinden ilham aldık. #KodluyoruzLab ile Kodluyoruz Akademi Mezunlar Kulübü’nden gençler yolculuğumuz boyunca ürettiklerini daha fazla gence ilham olmak için paylaşıyor. Şimdi gençleri dinleme zamanı…
2019 İstanbul “React Native” bootcamp katılımcımız Çağatay Sert tarafından hazırlanan “Webpack’e İlk Adım” başlıklı yazı sizlerle. Keyifli okumalar.
Günlük hayatta bazen sık sık duyduğumuz kavramlar vardır. Benim için bu kavramlardan biri Webpack…
Bu zamana kadar yapılandırma işlerinden hoşlanmadığım için Webpack’ten uzak kaldım. Fakat daha fazla kayıtsız kalmanın da anlamsız olacağını anladım ve bu kavrama dair çalışmalar yapmaya başladım. Bu yazıda da elimden geldiğince sizlere edindiğim bilgileri aktaracağım.
Webpack Nedir?
Webpack, projemizde kullanılan JavaScript, HTML, CSS, Image, Font gibi dosyaları, istediğiniz formata dönüştürmenizi sağlayan bir araçtır. Ana görevi, projenizin ihtiyaç duyduğu tüm modüllerin bağımlılıklarını arka planda çözerek, bize tek bir (veya birden fazla) Bundle vermesidir. Ayrıca dosyalarınızı “Production” ortamında minify etmenize, istediğiniz işlemlerden geçen dosyaların nasıl bir dizinde projeye aktarılacağını belirlemenize, resim dosyalarınızı istediğiniz şekilde export etmek gibi işlemlere de yardımcı olur. Bu işlemleri yaparken de bir konfigürasyon dosyasına ihtiyaç duyar. Bu dosyada, ipin ucu biraz kaçabiliyor çünkü dosya büyüdükçe anlaşılması da güç bir hâl alıyor. Fakat Webpack 4.0.0 sürümünden itibaren, Bundle oluşturmak için herhangi bir konfigürasyon dosyasına ihtiyaç duyulmuyor. Yine de istediğiniz özgül işlemleriniz için hala bu dosyayı oluşturmak zorundasınız.
Sıfır Konfigürasyon
Öncelikle ben, “Test” adında bir klasör açtım ve bu klasörün altına “src” (sources) adında bir alt klasör daha oluşturdum. Daha sonra “npm init -y” komutunu çalıştırarak projemiz için “package.json” dosyamızı oluşturdum.
Hatırlarsanız hiçbir konfigürasyon dosyasına ihtiyaç duymadan Bundle oluşturabileceğimizden bahsetmiştim. Konfigürasyon dosyası hazırlamayacağımız için aslında “src” adında bir alt klasör daha oluşturduk. Çünkü Webpack, Bundle oluşturmak için Default olarak ilk olarak bu klasör altına bakmakta.
Şimdi gerekli NPM paketlerini kuralım:
- npm i webpack — save-dev
- npm i webpack-cli — save-dev
Paketlerimizi de indirdikten sonra “package.json” dosyasını açalım ve bir Script yazalım.
Şimdi ise az önce oluşturduğumuz “src” klasörünün altında bir “index.js” dosyası oluşturalım ve test etmek için bu dosyaya “console.log(‘denemesi bedava’);” yazalım. Evet, şimdi sonucu görme zamanı geldi. “npm run build” yazarak Script’imizi çalıştıralım ve ana dizine gidip değişikliklere bakalım.
Eğer her şey yolunda gittiyse yukarıda gördüğümüz gibi bir “dist” klasörü oluşmuş ve bu klasörün altında, “main.js” adında bir de Minify edilmiş JavaScript dosyası oluşmuş olmalı. Gördüğünüz gibi hiçbir konfigürasyon ile uğraşmadan Webpack ile Bundle oluşturmuş olduk. Denemek için “dist” klasörüne terminalden giderek “node main.js” komutunu çalıştıralım ve konsolda “denemesi bedava” çıktısını görelim.
Ayrıca Webpack bizlere, “package.json” içinde yapacağımız ufak bir düzenlemeyle “Production” veya “Development” ortamları için ayrı ayrı Script’ler oluşturmamıza da olanak sağlamakta. Bunun için “package.json” dosyamızı şu şekilde düzenlememiz yeterli:
İsterseniz denemek için “npm run dev” komutunu terminalde çalıştırabilir ve “main.js” dosyasındaki değişikliklere bakabilirsiniz. Daha okunabilir bir kod görüyorsunuz değil mi?
Babel 7 ile JavaScript ES6 Kullanımı
Projenizde JavaScript ES6 kullanmak isteyebilirsiniz. ES6, özellikle ön yüz kütüphanelerinde olmazsa olmaz gibi bir duruma geldi diyebiliriz sanırım. Peki bu ES6 ile gelen yenilikleri nasıl kullanabiliriz? Öncelikle gerekli paketlerimizi kuralım.
- npm i @babel/core babel-loader @babel/preset-env — save-dev
Şimdi ise ana dizinde “.babelrc” adında bir dosya oluşturalım ve içini aşağıdaki gibi dolduralım.
İşte şimdi Webpack’in Babel’i kullanmasını sağlamak için bir konfigürasyon dosyasına ihtiyacımız var. Bunun için yine ana dizinde “webpack.config.js” adında bir dosya daha oluşturalım ve içini aşağıdaki gibi dolduralım.
Test etmek için “index.js” dosyası altında ES6 ile gelen birkaç özelliği kullanalım.
Daha önce yaptığımız gibi “npm run build” yazarak Build alalım ve “dist” klasörüne terminalden gidip “node main.js” yazarak sonucu test edelim. (Evet hep uykum var :))
Şimdilik burada bırakıyorum. Değinmek istediğim birkaç temel şey daha var; onları da yazımın ikinci kısmında eklemeye çalışacağım.
Bir sonraki yazımda görüşmek üzere, hoşçakalın.
Bu yayın Avrupa Birliği’nin yardımıyla hazırlanmıştır. Bu yayının içeriğinden yalnızca Kodluyoruz Derneği sorumlu olup, herhangi bir şekilde AB’nin, Türkiye Cumhuriyeti’nin ve Dışişleri Bakanlığı AB Başkanlığının görüşlerini yansıttığı şeklinde yorumlanamaz.
