Webpack - webpack-dev-server - webpack-dev-middleware - webpack-hot-middleware vs vs

97

Birlikte çalıştığım başlıyorum webpackbir ile node/expressgelişmekte olan bir ortamda ReactJSsunucu tarafı render uygulaması react-router. Geliştirme ve üretim (çalışma zamanı) ortamları için her bir web paketi paketinin rolü konusunda kafam iyice karışıyor.

İşte anlayışımın özeti:

webpack: Bir web uygulamasının farklı parçalarını bir araya getiren ve daha sonra tek bir .js dosyasında (normalde bundle.js) paketleyen bir paket, araçtır . Sonuç dosyası daha sonra uygulama tarafından yüklenecek bir üretim ortamında sunulur ve kodu çalıştırmak için gerekli tüm bileşenleri içerir. Özellikler arasında kod küçültme, küçültme vb.

webpack-dev-server: Web sitesi dosyalarını işlemek için bir sunucu sunan bir pakettir . Ayrıca bundle.js, istemci bileşenlerinden tek bir .js dosyası ( ) oluşturur, ancak bunu bellekte sunar. Ayrıca, -hottüm yapı dosyalarını izleme ve kod değişiklikleri durumunda bellekte yeni bir paket oluşturma seçeneğine de ( ) sahiptir . Sunucu, doğrudan tarayıcıda sunulur (örn:) http:/localhost:8080/webpack-dev-server/whatever. Bellek içi yükleme, sıcak işleme ve tarayıcı hizmetinin kombinasyonu, geliştirme ortamı için ideal olan kod değiştiğinde kullanıcının uygulamayı tarayıcıda güncellemesini sağlar.

Yukarıdaki metinle ilgili şüphelerim varsa, aşağıdaki içerikten gerçekten emin değilim, bu yüzden lütfen gerekirse bana bildirin

Kullanarak yaygın bir sorun webpack-dev-serverolan node/express, IS webpack-dev-serverbir sunucu, gibidir node/express. Bu, bu ortamı hem istemciyi hem de bazı düğüm / ekspres kodu (API vb.) Çalıştırmak için zor hale getirir. NOT: Karşılaştığım şey buydu, ancak bunun neden daha ayrıntılı olarak gerçekleştiğini anlamak harika olurdu ...

webpack-dev-middleware: Bu, aynı işlevlere webpack-dev-server(bellek içi gruplama, çalışırken yeniden yükleme) sahip, ancak server/expressuygulamaya eklenebilecek formatta bir ara yazılımdır . Bu şekilde, webpack-dev-serverdüğüm sunucusunda bir tür sunucuya (the ) sahip olursunuz . Oops: Bu çılgın bir rüya mı ??? Bu parça geliştirme ve üretim denklemini nasıl çözebilir ve hayatı kolaylaştırabilir

webpack-hot-middleware: Bu ... Buraya sıkışmış ... Bu parçayı ararken buldum webpack-dev-middleware... Nasıl kullanacağımı bilmiyorum.

ENDNOTE: Üzgünüm, yanlış bir düşünce var mı? Bu değişkenleri karmaşık bir ortamda anlamak için gerçekten yardıma ihtiyacım var. Uygunsa, lütfen tüm senaryoyu oluşturacak daha fazla paket / veri ekleyin.

javascript  node.js  webpack  webpack-dev-server  webpack-dev-middleware 
— Mendes
kaynak
2
Burada listelenen paketlerin hiçbiri üretimde sunucu tarafında kullanılmaz - bunlar yalnızca geliştirici araçlarıdır. Kendi özel geliştirme sunucunuzu yazmak isterseniz kullanırsınız webpack-dev-middleware(ve potansiyel olarak webpack-hot-middleware). Sahip olmasını istemediğiniz belirli bir özellik olmadığı sürece webpack-dev-server, onu kullanmalısınız.
— Joe Clay

Yanıtlar:

123

webpack

Açıkladığınız gibi, Webpack bir modül paketleyicidir, bir tarayıcıda çalıştırılabilmeleri için öncelikle çeşitli modül formatlarını bir araya getirir. Bu bir arada sunuyor CLI ve Düğüm API .

webpack-dev-middleware

Webpack Dev Middleware, geliştirme sırasında paketinizin en son derlemesini sunmak için ekspres bir sunucuya monte edilebilen bir ara yazılımdır . Bu, izleme modundawebpack 'nin Düğüm API'sini kullanır ve dosya sistemine çıktı vermek yerine belleğe çıktı verir .

Karşılaştırma için, express.staticüretimde bu ara katman yazılımı yerine benzer bir şey kullanabilirsiniz .

webpack-dev-server

Webpack Dev Server, en son paketi sunmak için kullanan ve ayrıca istemcideki canlı modül güncellemeleri için etkin modül değiştirme (HMR) isteklerini işleyen bir ekspres sunucudurwebpack-dev-middleware .

webpack-hot-middleware

Webpack Hot Middleware bir alternatiftir, webpack-dev-serverancak bir sunucunun kendisini başlatmak yerine, onu mevcut / özel bir ekspres sunucuya yan yana bağlamanıza izin verir webpack-dev-middleware.

Ayrıca...

webpack-hot-server-middleware

Hemen de yanında kullanılmak üzere tasarlanmıştır WebPack Sıcak Sunucu Ara Katman var, hatta daha fazla şeyler şaşırtmak için webpack-dev-middlewareve webpack-hot-middlewaresunucu render uygulamalar sıcak modül değiştirme işlemek için.

— Riscarrott
kaynak
2
Ön uç ve arka uç sıcak modül değiştirme arızası arayanlar için lütfen şu gönderiye bakın: stackoverflow.com/questions/46086297/… Xlee, her bir taraf için gereksinimleri açıklayan iyi bir iş çıkarıyor - sunucu tarafında yeniden başlatılması gerekiyor , güncellenmiş javascript paketlerinde yüklemeye izin veren ön uç.
— abelito
9

2018'deki güncelleme itibariyle ve resmi GitHub sayfasındaki webpack-dev-server notu dikkate alındığında :

Bakımda Proje Lütfen webpack-dev-server'ın şu anda yalnızca bakım modunda olduğunu ve yakın vadede herhangi bir ek özelliği kabul etmeyeceğini unutmayın. Çoğu yeni özellik isteği, Express ara yazılım ile gerçekleştirilebilir; lütfen dokümantasyondaki önceki ve sonraki kancaları kullanmayı inceleyin.

Bir web paketi HMR oluşturmak için doğal seçim ne olurdu?

— Mendes
kaynak
2
Ayrıca, Webpack-service'iUse webpack-serve for a fast alternative. Use webpack-dev-server if you need to test on old browsers. denemek isteyebileceğinizi de söylüyor .
— Bruce Sun
3
Bakım notu kaldırıldı. Sanırım tekrar tavsiye edilir ??? Böylesine önemli bir geliştirme aracının etrafında böylesine korkunç bir bakım ekibinin olması çıldırtıcı.
— Alma Alma
5
webpack-service kullanımdan kaldırıldı ve @CaptainFogetti bugün itibariyle bakım notunun webpack-dev-server'dan kaldırıldığını söylediği gibi
— Anoop D
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.