Merhaba

Şimdi basit bir çalışma örneği gerçekleştireceğiz. Aşağodaki dizin ağacını takip edebilirsiniz. Yine, projemizin ana dizininde src dizini oluşturalım ve js dizini içerisinde basit bir işlemi birden fazla dosya ile yapmaya çalışalım.

├── node_modules
├── index.html
├── package.json
├── package-lock.json
└── src
    ├── css
    │   └── style.css
    └── js
        ├── app.js
        └── domquery.js

Bir domquer.js dosyası oluşturuyorum, HTML nesnemin seçilimi için.

export const domquery = document.querySelector('.w-learn');

Bir de app.js dosyası oluşturuyorum, HTML DOM textContent özelliğim ile ekrana veri bastırmak için.

import { domquery } from "./domquery";

domquery.textContent="Merhaba!";

Ve son olarak css dizinini oluşturuyorum ve style.css dosyamda ilgili nesneme basit bir özellik tanımlıyorum.

.w-learn{
  color:red;
}

Ana dizinimde bulunan index dosyamı oluşturup güncelleyeceğim. Burada dikkat etmemiz gereken nokta buradaki JavaScript dosyalarını dist/bundje.js yolu ile çağırmamız. Yani, elimizde bulunan iki adet modülü paketleyeceğiz.

<html>
    <body>
      <h1 class="w-learn"></h1>
      <script src="dist/bundle.js" charset="utf-8"></script>
    </body>
</html>

Şimdi ise Webpack konfigüre adımına geldik. Burası önemli olan kısım. Yine ana dizinimizde bulunan package.json dosyamızı güncelleyeceğiz.

"scripts": {
  "build": "webpack --entry ./src/js/app.js --output-filename ./dist/bundle.js"
},

Bir bakalım, ne yazdık biz? Uçbirimde npm run build komutu ile çalıştıracağımız bir komut uyarladık. Önce paketimin ismini yazdım. Hemen ardından giriş dosyam anlamına gelen entry parametresini tanımladım ve yolunu gösterdim. Bir de çıkış dosyamın dizinini ve hangi dosya ismi ile adlandırılacağını belirttim. Bir dist yolu olmasa da kendi oluşturacak ve güncelleyecektir. Burada kullanılan komut ve parametrelerin tamamına dökümandan ulaşabilirsiniz. Temel olarak package.json’da çalıştırılmak istenildiğinde kullanılan iki temel parametre bunlardır.

Uçbirimde npm run build diyerek proje dizinimde komutumu çalıştırıyorum.

> [email protected] build /opt/lampp/htdocs/webpack-blog-ders
> webpack --entry ./src/js/app.js --output-filename ./dist/bundle.js

Hash: c560be31af2d1d1ebcd6
Version: webpack 3.8.1
Time: 69ms
           Asset  Size  Chunks             Chunk Names
./dist/bundle.js  3 kB       0  [emitted]  null
   [0] ./src/js/app.js 73 bytes {0} [built]
   [1] ./src/js/domquery.js 60 bytes {0} [built]

Yukarıdakine benzer bir çıktı almanız gerek. Burada oluşturduğu dizide her eleman bizim bir modülümüze denk gelmektedir. Bu dizi bundle.js dosyasından incelenebilir.

Şimdi ise sanal sunucumda çalıştırıyorum.

Başarılı bir şekilde çalıştırdık. Şu an elimizde sadece iki adet modül var fakat React JS ya da diğer çatılarla çalıştığınızda ne kadar hayati olduğunu bir kez daha kavrayabileceksiniz. Buradaki CSS dosyamızı neden paketlemedik peki? Çünkü Webpack sadece JavaScript dosyaları üzerinde çalışır. Bunun dışında tüm farklı modüller için Webpack eklentilerini kullanacağız. Peki, bundle.js dosyamı canlı bir çalışmada kullandığım zaman sıkıştırılmasını isterim ben. Bunu nasıl yapacağım? Muhtemelen pretty’den gelen -p parametresi ile.

"scripts": {
  "build": "webpack --entry ./src/js/app.js --output-filename ./dist/bundle.js -p"
},

Tekrar çalıştırıyorum.

> [email protected] build /opt/lampp/htdocs/webpack-blog-ders
> webpack --entry ./src/js/app.js --output-filename ./dist/bundle.js -p

Hash: 2e07e765e0eae342c668
Version: webpack 3.8.1
Time: 103ms
           Asset       Size  Chunks             Chunk Names

./dist/bundle.js  651 bytes       0  [emitted]  null
   [0] ./src/js/app.js 75 bytes {0} [built]
   [1] ./src/js/domquery.js 60 bytes {0} [built]

Ve, mutlu son. Bundle JS dosyamın boyutunun küçüldüğünü görebiliyorum.

GitHub

Buraya kadar yaptığımız çalışmaları GitHub üzerinden görüntüleyebilirsiniz.

results matching ""

    No results matching ""