Webpack ile Başlarken [Örnek Projeli]

webpack bir modül paketleyici Bu karmaşık JavaScript uygulamaları oluşturmayı kolaylaştırır. React topluluğu onu ana yapım aracı olarak seçtiğinden beri ciddi bir çekiş kazandı. Web paketi Ne paket yöneticisi ne de görev koşucusu farklı (daha gelişmiş) bir yaklaşım kullandığı için, ancak hedefi aynı zamanda dinamik bir derleme süreci kurmak.

Webpack vanilya JavaScript ile çalışır. Kullanabilirsiniz Bir uygulamanın statik varlıklarını paketlemek, resimler, yazı tipleri, stil sayfaları, komut dosyaları gibi tek bir dosya halinde tüm bağımlılıklara dikkat etmek.

Basit bir uygulama veya web sitesi oluşturmak için Webpack'e ihtiyacınız olmayacak, örneğin yalnızca bir JavaScript ve bir CSS dosyası ve birkaç resim içeren bir dosya, ancak bir uygulama için hayat kurtarıcı olabilir. Birkaç varlık ve bağımlılıkla daha karmaşık bir uygulama.

Webpack vs görev koşucular vs. Browserify

Peki, Webpack nasıl biriktirir diğer yapı araçlarına kıyasla Grunt, Gulp veya Browserify gibi?

Grunt ve Gulp görev yapanlar. Config dosyasında siz görevleri belirt, ve görev koşucu bunları yürütür. görev koşucusunun iş akışı temelde şuna benzer:

Ancak, Webpack bir modül paketleyici tüm projeyi analiz eder, bir bağımlılık ağacı kurar, ve paketlenmiş bir JavaScript dosyası oluşturur tarayıcıya hizmet ettiğini.

Browserify, Webpack'e görev yapanlardan daha yakın bir bağımlılık grafiği oluşturur ama sadece öyle JavaScript modülleri için. Webpack bir adım daha ileri gidiyor ve sadece kaynak kodunu vermiyor ayrıca diğer varlıklar resimler, stil sayfaları, yazı tipleri vb..

Hakkında daha fazla bilgi edinmek istiyorsanız Webpack diğer yapım araçlarıyla nasıl karşılaştırılır?, Size iki makale öneriyorum:

1. Andrew Ray'in Webpack: Ne Zaman Kullanılmalı ve Neden kendi blogunda
2. Cory'nin Evi Browserify vs Webpack freeCodeCamp'da (harika resimlerle)

Yukarıdaki iki şekil Pro React el kitabının Webpack malzemeleri, bakmaya değer başka bir kaynak.

Webpack'in dört temel konsepti

Webpack’in denilen dört ana yapılandırma seçeneği “temel kavramlar” Geliştirme sürecinde tanımlamanız gerekecek:

1. giriş - başlangıç ​​noktası bağımlılık grafiğinin (bir veya daha fazla JavaScript dosyası).
2. Çıktı - istediğiniz dosyayı paketlenecek çıktı (bir JavaScript dosyası).
3. yükleyici - varlıklar üzerinde dönüşüm onları Webpack modüllerine dönüştürün onlar olabilir bağımlılık grafiğine eklendi. Örneğin, CSS yükleyici CSS dosyalarının içe aktarılması için kullanılır.
4. eklentiler - özel eylemler ve işlevler paket üzerinde gerçekleştirilen. Örneğin, i18n-webpack-eklentisi yerelleştirmeyi pakete yerleştirir.

Yükleyiciler dosya başına çalışır derleme yapılmadan önce. Eklentiler birlikte verilen kodda yürütülür, derleme işleminin sonunda.

Webpack'i yükleyin

için Webpack yükleyin, komut satırını açın, proje klasörünüze gidin ve aşağıdaki komutu çalıştırın:

 npm giriş 

Konfigürasyonu kendiniz yapmak istemiyorsanız, npm yapabilirsiniz. doldurmak package.json varsayılan değerlere sahip dosya aşağıdaki komutla:

 npm init -y 

Ardından, Webpack'i yükleyin:

 npm webpack yüklemek - save-dev 

Varsayılan değerleri kullandıysanız, package.json dosya şimdi gibi görünmelidir (özellikler farklı bir sırada olabilir):

 "name": "_tests", "sürüm": "1.0.0", "açıklama": "", "ana": "webpack.config.js", "bağımlılıklar": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," script ": " test ":" echo \ "Hata: test belirtilmemiş \" && exit 1 "," anahtar kelimeler ": []," yazar ":" "," lisans ":" ISC " 

Yapılandırma dosyasını oluşturun

Oluşturmanız gerekir webpack.config.js dosya projenin kök klasöründe. Bu yapılandırma dosyasının merkezi bir rolü vardır; dört temel kavramı tanımlar (giriş noktaları, çıktılar, yükleyiciler, eklentiler).

webpack.config.js dosya bir yapılandırma nesnesini tutar belirtmeniz gereken özellikleri. Bu yazıda, aşağıdaki dört özelliği belirteceğiz: dört temel konsepte karşılık gelir (giriş, çıktı, modül, ve Eklenti), ancak config nesnesinin başka özellikleri de var.

1. Giriş noktalarını oluşturun

Alabilirsin bir veya daha fazla giriş noktası. Onları tanımlamanız gerekir. giriş özellik.

Aşağıdaki kod parçacığını webpack.config.js dosya. O bir giriş noktası belirtir:

 module.exports = entry: "./src/script.js"; 

Birden fazla giriş noktası belirtmek için kullanabilirsiniz dizi veya nesne sözdizimi.

Proje klasörünüzde, yeni bir tane oluştur src Klasör ve bir script.js içindeki dosya. Bu senin olacak giriş noktası. Test amacıyla, sadece bir dize yerleştir içinde. Aşağıdakini kullandım (ancak daha ilginç olanı da kullanabilirsiniz):

 const greeting = "Merhaba. Bir Webpack başlangıç ​​projesiyim."; document.write (tebrik); 

2. Çıktıyı tanımlayın

Alabilirsin sadece bir çıktı dosyası. Webpack tüm varlıkları bu dosyaya toplar. Yapılandırmanız gerekir çıktı Aşağıdaki şekilde özellik:

 const path = request ("path"); module.exports = entry: "./src/script.js", çıkış: dosyaadı: "bundle.js", yol: path.resolve (__ dirname, 'dist'); 

dosya adı özellik tanımlar birlikte verilen dosyanın adı, iken yol özellik dizinin adını belirtir. Yukarıdaki örnek, /dist/bundle.js dosya.

Zorunlu olmasa da, daha iyi kullan path.resolve () yöntem tanımladığınızda yol mülk, olduğu gibi doğru modül çözünürlüğü sağlar (Çıktının mutlak yolu, farklı ortamlarda farklı kurallara göre yaratılır, modül çözünürlüğü bu tutarsızlığı çözer). Eğer kullanırsan path.resolve, gerek gerektirir yol Düğüm modülü üstünde webpack.config.js dosya.

3. Yükleyici ekleyin

için yükleyicileri ekle, tanımlamanız gerekir modül özelliği. Aşağıda kargaşa yükleyici Bu size sağlar ECMAScript 6 özelliklerini güvenle kullanın JS dosyalarınızda:

 const path = request ("path"); module.exports = entry: "./src/script.js", çıkış: dosyaadı: "bundle.js", yol: path.resolve (__ dirname, 'dist'), modül: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, kullanım: loader: "babel-loader", seçenekler: presets: ["env"]]; 

Yapılandırma zor görünebilir, ancak yalnızca kopyadan yapıştırılmıştır Babil loader'ın belgeleri. Çoğu yükleyici ya bir benioku dosyası ya da bir tür dokümantasyonla birlikte gelir, böylece (neredeyse) her zaman onları doğru şekilde nasıl yapılandıracağınızı bilirsiniz. Ve, Webpack belgelerinde ayrıca açıklayan bir sayfa var. nasıl yapılandırılır module.rules.

Ekleyebilirsin İhtiyacınız kadar çok yükleyici, İşte tam liste. Ayrıca yapmanız gerektiğini unutmayın Her yükleyiciyi npm ile kurun onları çalıştırmak için. Babel yükleyici için, gerekli Node paketlerini npm ile yüklemeniz gerekir:

 npm install - save-dev babel-yükleyici babel-core babel-preset-env webpack 

Eğer bir göz atarsan package.json dosya, bu npm göreceksiniz , Babil’le ilgili üç paket ekledi devDependencies özellik, bunlar ES6 derlemesini halledecek.

4. Eklentileri ekleyin

için eklentileri ekle, belirtmeniz gerekir eklentileri özelliği. Artı, ayrıca yapmak zorundasın. gerektirir eklentileri birer birer, harici modüller oldukları için.

Örneğimizde iki Webpack eklentisi ekliyoruz: HTML Webpack eklentisi ve Preload Webpack eklentisi. Web paketi bir güzel eklenti ekosistemi, tam listeye buradan göz atabilirsiniz.

Eklentileri Düğüm modülü olarak istemek için, iki yeni sabit yarat: HtmlWebpackPlugin ve PreloadWebpackPlugin ve kullan ) (Gerektirir fonksiyon.

 const path = request ("path"); const HtmlWebpackPlugin = gereksinimi ("html-webpack-plugin"); const PreloadWebpackPlugin = zorunlu ("önyükleme-webpack-eklentisi"); module.exports = entry: "./src/script.js", çıkış: dosyaadı: "bundle.js", yol: path.resolve (__ dirname, 'dist'), modül: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, kullanım: loader: "babel-loader", seçenekler: presets: ["env"]], eklentiler: [new HtmlWebpackPlugin (), yeni PreloadWebpackPlugin ()]; 

Aynen yükleyicilerde olduğu gibi npm ile Webpack eklentilerini kurun. Örnekteki iki eklentiyi yüklemek için, komut satırınızda aşağıdaki iki komutu çalıştırın:

 npm html-webpack-eklentisini kurun - save-dev npm install - save-dev önyüklemesi-webpack-eklentisi 

Eğer kontrol edersen package.json Şimdi dosya, npm göreceksiniz iki eklentiyi devDependencies özellik.

Webpack'i çalıştırın

için bağımlılık ağacını oluştur ve paket çıktı, Komut satırında aşağıdaki komutu çalıştırın:

 webpack 

O genellikle bir iki dakika sürer Webpack için proje oluşturmak için. Tamamlandığında, CLI’nizde benzer bir mesaj göreceksiniz:

Her şey yolunda giderse Webpack Bir oluşturulan dist Klasör projenizin kökeninde ve iki paketlenmiş dosyayı yerleştirdi (bundle.js ve index.html) içinde.

Github deposu

Tüm projeyi incelemek, indirmek veya çatallamak istiyorsanız Github depomuza bir göz atın.