5

webpack ve html-webpack-plugin dizinlerini kullanarak index.html dosyasını oluşturulan komut dosyası paketiyle (bundle.[hash].js) güncellerim.Webpack-dev-server ve HTML-webpack-plugin kullanarak diske .html çıkışı nasıl verilir

webpack-dev-server'u çalıştırmam gerekiyor, böylece bu paketi belleğe yükleyebilmem ve Hot Module Replacement'ın avantajlarından yararlanabiliyorum.

Bu, kodun iki kere derlenmesini sağlar. webpack-dev-server Ayrıca yeni bundle.[hash].js ile index.html dosyasını güncellemek edebilmek için şimdi webpack-dev-sever ardından webpack yayınlamak zorunda çünkü

Ancak, ne istiyoruz vardır. İki kere derlemek garip görünüyor.

Yine, webpack çalıştırdığım tek nedeni, index.html dosyasının paketin yeni karmasıyla güncelleştirilmesini sağlamaktır. Güncel bir index.html diske çıktılamak için webpack-dev-server alabilirsem, webpack komutunu tamamen bırakabilirim.

Bu mümkün mü? Öyleyse, web paketi yapılandırması ne olur? Webpack yapılandırmam çok uzun olduğu için burada yayınlamaya yardımcı olacağını düşünmedim.

+0

neden iki kez derlediğini buldunuz mu. Aynı soruna sahip ... – alphapilgrim

+0

Yea, iki kere derler çünkü '' webpack '' derlenecek ve 'webpack-dev-server' derlenecektir. Index.html dosyasını güncellemek için 'webpack' kullanmamayı bitirdim ve yalnızca geliştirme sırasında' webpack-dev-server'ı ve üretim sırasında sadece 'webpack'' kullanıyorum. Zorlanmamasını önlemek için bazı hariç tutmalar eklemeniz gerekir. – TetraDev

cevap

1

webpack-dev-server

üç tane olabilir, bellekte derlenmiş paket depolamak ve dizin çıktıya demeti yazmaz, bu yüzden webpack-dev-server kullanırken paket adına [hash] eklemek gerekmez düşünüyorum Webpack yapılandırma dosyaları, webpack.common.js, webpack.dev.js ve webpack.prod.js.

webpack-dev-server için kullanılan webpack-merge

webpack.dev.js kullanarak diğer düzenekler ile birleştirilmiş olan ortak yapılandırmaları içerir webpack.common.js ve çıktı dosyası olmalıdır bundle.js

webpack.prod.js üretim için kullanılır ve çıktı dosya adı bundle.[hash].js

webpack-dev-server bellekte güncellenen HTML kaydeder:o zaman sadece bu tam olarak neye ihtiyacınız olduğunu düşünüyorum webpack-dev-server webpack.dev.js

+0

Ben Angular2-webpack-starter gelen, bunun gibi 3 farklı yapılandırmaları kullanıyorum. Ancak, webpack paketini yüklemek için .NET sunucu sayfamı '_Layout.cshtml' (tek sayfa uygulamasının ana görünümü olan) 'ı almak için' _Layout.cshtml' webpack’e paket.Bu nedenle, webpack-dev-server, Yeni paket karması ile Görünümü güncelleyemez ve paket adını yazmak için "webpack" i kullanmalıyım ve daha sonra paketi sunmak için "webpack-dev-server" kullanmam gerekir. – TetraDev

+0

Aslında, sadece webpack-dev-server'dan eski hash yükleyemediğini fark ettim çünkü önbellek yok, belleğe yüklendi ve dev sunucunun durduğu her zaman temizlendi. Bu yüzden, doğru demeyi dev bundle'dan kaldırabiliyorum. – TetraDev

+1

Yeni Fikir: Yapı sırasında webpack-dev-server'ın varlıklarını wwwroot'a dönüştürmesi için bir yol var mı? Ya da sadece çıktı varlıklarını diske "webpack" yapabilir? – TetraDev

1

çalıştırabilir. Bu eklenti ile, dosya sistemine de yazacaktır.