Yeni başlayanlara Webpack’e giriş

Webpack nedir?

Webpack, JavaScript modüllerini derlemenizi sağlayan bir araçtır. Aynı zamanda modül paketleyici olarak da bilinir.

Çok sayıda dosya verildiğinde, uygulamanızı çalıştıran tek bir dosya (veya birkaç dosya) oluşturur.

Birçok işlemi gerçekleştirebilir:

  • Kaynaklarınızı paketlemenize yardımcı olur.
  • değişiklikleri izler ve görevleri yeniden çalıştırır.
  • Tarayıcı desteği konusunda endişelenmeden en yeni JavaScript özelliklerini kullanabilmenizi sağlayan Babel aktarımını ES5'e çalıştırabilir.
  • CoffeeScript'i JavaScript'e aktarabilir
  • satır içi görüntüleri veri URI'lerine dönüştürebilir.
  • CSS dosyaları için use () kullanmanıza izin verir.
  • bir geliştirme web sunucusu çalıştırabilir.
  • Sıcak modül değişimini kaldırabilir.
  • İlk sayfa isabetinde yüklenecek devasa bir JS dosyasının olmasını önlemek için çıktı dosyalarını birden fazla dosyaya bölebilirsiniz.
  • ağaç titremesini gerçekleştirebilir.

Webpack, ön uçta kullanılmakla sınırlı değildir, ancak arka uç Node.js geliştirmesinde de faydalıdır.

Webpack'in öncülleri ve bu araçların ve Webpack'in yaptıklarında pek çok benzerlik var. Asıl fark, bu araçların görev koşucusu olarak bilinmesi, Webpack ise modül paketleyici olarak doğmasıdır.

Webpack daha odaklı bir araçtır. Sadece uygulamanız için bir giriş noktası belirtmeniz gerekir (hatta komut dosyası etiketli bir HTML dosyası bile olabilir) ve webpack dosyaları analiz eder ve uygulamayı çalıştırmak için ihtiyacınız olan her şeyi içeren tek bir JavaScript çıkış dosyasında toplar.

Webpack'i yükleme

Webpack her proje için global olarak veya yerel olarak kurulabilir.

Genel kurulum

İşte Iplik ile küresel olarak nasıl kurulur:

İplik global eklemek webpack webpack-cli

npm ile:

npm i-g web paketi webpack-cli

Bu yapıldıktan sonra kaçabilmelisin.

webpack-cli

Yerel yükleme

Webpack yerel olarak da kurulabilir. Webpack proje başına güncellenebildiğinden önerilen kurulumdur ve Webpack'i kullanan tüm projeleri güncellemek yerine sadece en yeni özellikleri küçük bir proje için kullanma konusunda daha az dirençli olursunuz.

İplikli:

iplik ekle webpack webpack-cli -D

npm ile:

npm ben web paketi webpack-cli - save-dev

Bu yapıldıktan sonra, bunu package.json dosyasına ekleyin:

{
  // ...
  "Kodlar": {
    "build": "webpack"
  }
}

Bu yapıldıktan sonra, yazarak Webpack'i çalıştırabilirsiniz.

iplik üretimi

proje kökünde.

Web paketi yapılandırması

Varsayılan olarak, bu sözleşmelere uyduğunuz takdirde, Webpack (sürüm 4'ten itibaren) herhangi bir yapılandırma gerektirmez:

  • uygulamanızın giriş noktası ./src/index.js
  • çıktı ./dist/main.js dosyasına yazılmıştır.
  • Webpack üretim modunda çalışır

İhtiyaç duyduğunuzda Webpack'in her küçük parçasını özelleştirebilirsiniz. Webpack yapılandırması webpack.config.js dosyasında, proje kök klasöründe depolanır.

Giriş noktası

Varsayılan olarak giriş noktası ./src/index.js şeklindedir. Bu basit örnek, ./index.js dosyasını başlangıç ​​noktası olarak kullanır:

module.exports = {
  /*...*/
  giriş: './index.js'
  /*...*/
}

Çıktı

Varsayılan olarak çıktı ./dist/main.js dosyasında üretilir. Bu örnek çıktı paketini app.js dosyasına yerleştirir:

module.exports = {
  /*...*/
  çıktı: {
    path: path.resolve (__ dirname, 'dist'),
    dosyaadı: 'app.js'
  }
  /*...*/
}

Webpack kullanmak, JavaScript kodunuzda yalnızca başka JavaScript’leri değil, her türlü dosyayı (örneğin CSS) eklemek için içe aktarma kullanmanıza veya ifadelerinize gereksinim duymanıza izin verir.

Webpack sadece JavaScript'i değil tüm bağımlılıklarımızı ele almayı hedeflemektedir ve yükleyiciler bunu yapmanın bir yoludur.

Örneğin, kodunuzda şunları kullanabilirsiniz:

'style.css' dosyasını içe aktar

bu yükleyici yapılandırmasını kullanarak:

module.exports = {
  /*...*/
  modül: {
    kurallar: [
      {test: /\.css$/, kullanım: 'css-loader'},
    }]
  }
  /*...*/
}

Normal ifade, herhangi bir CSS dosyasını hedefler.

Yükleyici seçeneklere sahip olabilir:

module.exports = {
  /*...*/
  modül: {
    kurallar: [
      {
        sınama: /\.css$/,
        kullan: [
          {
            yükleyici: 'css-loader',
            seçenekler: {
              modüller: doğru
            }
          }
        ]
      }
    ]
  }
  /*...*/
}

Her kural için birden fazla yükleyici gerekebilir:

module.exports = {
  /*...*/
  modül: {
    kurallar: [
      {
        sınama: /\.css$/,
        kullanın:
          [
            'Tarzı-yükleyici',
            'Css yükleyici',
          ]
      }
    ]
  }
  /*...*/
}

Bu örnekte, css-loader, CSS'deki import 'style.css' yönergesini yorumlar. style-loader, daha sonra bir