angular-cli webpack.config.js dosyasıdır - yeni angular6, çıkarmayı desteklemiyor

GÜNCELLEME: Aralık 2018 ('Aniket' cevabına bakın)

Angular CLI 6 ile, çıkartma kullanımdan kaldırıldığından ve yakında 8.0'da kaldırılacağından, inşaatçıları kullanmanız gerekir.

GÜNCELLEME: Haziran 2018: Angular 6, çıkarmayı desteklemiyor **

GÜNCELLEME: Şubat 2017: çıkartmayı kullanma

GÜNCELLEME: Kasım 2016: angular-cli artık yalnızca web paketini kullanıyor. Yalnızca npm install -g angular-cli ile normal olarak yüklemeniz gerekir. "Beta.10 ve beta.14 arasındaki derleme sistemini SystemJS'den Webpack'e değiştirdik.", Ancak aslında sadece ilk yapı ve klasörler için angular-cli kullanıyorum ve artık webpack yapılandırmasını manuel olarak kullanıyorum.

Bununla açısal cli kurdum:

npm install -g angular-cli@webpack

Angular1 ve web pack ile çalışırken, tüm görevleri ve eklentileri yürütmek için "webpack.config.js" dosyasını değiştiriyordum, ancak angular-cli ile oluşturulan bu projede kimin çalıştığını göremiyorum. bu sihirdir?

Bunu yaptığımda Webpack'in çalıştığını görüyorum:

ng serve 

"Version: webpack 2.1.0-beta.18"

ancak angular-cli yapılandırmasının nasıl çalıştığını anlamıyorum ...

Angular CLI 6 ile, çıkartma kullanımdan kaldırıldığından ve yakında 8.0'da kaldırılacağından, yapıcıları kullanmanız gerekir. Yani ben bir şey yapmaya çalışırken böyle söylüyor ng çıkarma

Özel web paketi yapılandırmanızı sağlamak için açısal oluşturucular paketini ( https://github.com/meltedspark/angular-builders ) kullanabilirsiniz.

Blogumdaki hepsini tek bir blog gönderisinde özetlemeye çalıştım - Angular CLI 6'da özel web paketi yapılandırması ile yapı yapılandırması nasıl özelleştirilir

ama esasen şu bağımlılıkları eklersiniz -

  "devDependencies": {
    "@angular-builders/custom-webpack": "^7.0.0",
    "@angular-builders/dev-server": "^7.0.0",
    "@angular-devkit/build-angular": "~0.11.0",

Gelen angular.json marka değişiklikleri takip -

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {"path": "./custom-webpack.config.js"},

Oluşturucu ve yeni customWebpackConfig seçeneğindeki değişikliklere dikkat edin. Ayrıca değiştir

    "serve": {
      "builder": "@angular-builders/dev-server:generic",

Servis hedefi için oluşturucudaki değişikliğe tekrar dikkat edin. Bu değişiklikleri gönderin, custom-webpack.config.js adlı bir dosya oluşturabilirsiniz , aynı kök dizininizde ve web paketi yapılandırmanızı oraya ekleyebilirsiniz.

Ancak, burada sağlanan çıkarma yapılandırmasının aksine , varsayılan yapılandırma ile birleştirilecektir, bu nedenle düzenlemek / eklemek istediğiniz şeyleri eklemeniz yeterlidir.

Çıkarma için güzel bir yol var webpack.config.js gelen açısal-cli . Sadece koş:

$ ng eject

Bu, projenizin kök klasöründe webpack.config.js oluşturacaktır ve istediğiniz şekilde yapılandırmakta özgürsünüz. Bunun dezavantajı, package.json'unuzdaki derleme / başlatma komut dosyalarının yeni komutlarla değiştirilecek ve bunun yerine

$ ng serve

gibi bir şey yapmalısın

$ npm run build & npm run start

Bu yöntem, angular -cli'nin tüm son sürümlerinde çalışmalıdır (kişisel olarak birkaçını denedim, en eskisi 1.0.0-beta.21 ve en son 1.0.0-beta.32.3 )

Bu konuya göre , kullanıcıların öğrenme eğrisini azaltmak için Webpack yapılandırmasını değiştirmesine izin vermemek bir tasarım kararıydı.

Webpack'teki kullanışlı yapılandırma sayısı göz önüne alındığında, bu büyük bir dezavantajdır.

Kullanmanızı tavsiye etmem angular-cliÇok düşünülmüş olduğu için üretim uygulamaları için .

CLI'nin web paketi yapılandırması artık çıkarılabilir. Anton Nikiforov'un cevabını kontrol edin .

modası geçmiş:

Yapılandırma şablonunu kırabilirsiniz angular-cli/addon/ng2/models . Şimdilik web paketi yapılandırmasını değiştirmenin resmi bir yolu yok.

Github'da bununla ilgili kapalı bir "düzeltmeyeceğim" sorunu var: https://github.com/angular/angular-cli/issues/1656

Benim düşündüğüm şey, webpack'e sahip olmanın üretim yayınlandığında kolay olacağı.

Bilginize: https://github.com/Piusha/ngx-lazyloading

Önerisine göre ng ejectkullanabilirsinizngx-build-plus

Bakım ek yükü olmadan çıkartmanın faydalarını sağlayan yeni konfigürasyon formatıyla birlikte kullanılabilecek birkaç proje vardır. Böyle bir proje, burada bulunan ngx-build-plus'tır: https://github.com/manfredsteyer/ngx-build-plus