web-dev-qa-db-ger.com

angle-cli Die Datei webpack.config.js ist vorhanden

UPDATE: Dezember 2018 (siehe Antwort 'Aniket')

Mit Angular CLI 6 müssen Sie Builder verwenden, da der Auswurf veraltet ist und in 8.0 bald entfernt wird

UPDATE: Juni 2018: Angular 6 unterstützt keinen Auswurf **

UPDATE: Februar 2017: Verwenden Sie den Auswurf

UPDATE: November 2016: eckig-cli verwendet jetzt nur noch Webpack. Sie müssen nur mit npm install -g angle-cli installieren. "Wir haben das Build-System zwischen Beta.10 und Beta.14 umgestellt, von SystemJS zu Webpack.", Aber eigentlich verwende ich eckig-cli nur für die Struktur und Ordner, und dann benutze ich webpack config manuell

Ich habe winklig cli mit diesem installiert: 

npm install -g [email protected]

Als ich mit angle1 und dem Web Pack gearbeitet habe, habe ich die Datei "webpack.config.js" geändert, um alle Aufgaben und Plugins auszuführen, aber ich sehe nicht, dass dieses Projekt mit angle-cli erstellt wurde. es ist Magie? 

Ich sehe, dass Webpack funktioniert, wenn ich Folgendes tue:

ng serve 

"Version: webpack 2.1.0-beta.18"

aber ich verstehe nicht, wie die angle-cli config funktioniert ...

angularwebpackangular-cli
115
stackdave

Mit Angular CLI 6 müssen Sie Builder verwenden, da der Auswurf veraltet ist und in 8.0 bald entfernt wird. Das sagt es, wenn ich versuche, einen ng-Auswurf zu machen.

 enter image description here

Sie können das angle-builders-Paket ( https://github.com/meltedspark/angular-builders ) verwenden, um Ihre benutzerdefinierte Webpack-Konfiguration bereitzustellen. 

Ich habe versucht, alles in einem Blogeintrag in meinem Blog zusammenzufassen. - So passen Sie die Build-Konfiguration mit der benutzerdefinierten Webpack-Konfiguration in Angular CLI 6 an

aber im Wesentlichen fügen Sie folgende Abhängigkeiten hinzu -

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

Nehmen Sie in angle.json folgende Änderungen vor:

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

Beachten Sie die Änderungen im Builder und die neue Option customWebpackConfig. Auch ändern

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

Beachten Sie die Änderung im Builder für das Serveziel erneut. Wenn Sie diese Änderungen veröffentlichen, können Sie eine Datei mit dem Namen custom-webpack.config.js in demselben Stammverzeichnis erstellen und Ihre Webpack-Konfiguration dort hinzufügen.

Im Gegensatz zu ng eject wird die hier bereitgestellte Konfiguration jedoch mit der Standardkonfiguration zusammengeführt. Fügen Sie also einfach Sachen hinzu, die Sie bearbeiten/hinzufügen möchten.

11
Aniket Thakur

Es gibt eine schöne Möglichkeit, webpack.config.js aus angle-cli auszuwerfen. Renn einfach:

$ ng eject

Dadurch wird webpack.config.js im Stammordner Ihres Projekts generiert, und Sie können es nach Belieben konfigurieren. Der Nachteil ist, dass Build/Start-Skripte in package.json durch die neuen Befehle und anstelle von ersetzt werden 

$ ng serve

sie müssten so etwas tun 

$ npm run build & npm run start

Diese Methode sollte in allen aktuellen Versionen von angle-cli funktionieren (ich habe es persönlich ausprobiert, wobei die älteste 1.0.0-beta.21 und die neueste 1.0.0-beta.32.3 )

149
Anton Nikiforov

Entsprechend dieser Ausgabe war es eine Entwurfsentscheidung, Benutzern nicht zu erlauben, die Webpack-Konfiguration zu ändern, um die Lernkurve zu reduzieren.

In Anbetracht der Anzahl nützlicher Konfigurationen in Webpack ist dies ein großer Nachteil.

Ich würde die Verwendung von angular-cli nicht für Produktionsanwendungen empfehlen, da dies hochmeinend ist.

44
Ignatius Andrew

Die Webpack-Konfiguration der CLI kann jetzt ausgeworfen werden. Überprüfen Sie die Antwort von Anton Nikiforov .

veraltet:

Sie können die Konfigurationsvorlage in angular-cli/addon/ng2/models hacken. Es gibt derzeit keine offizielle Möglichkeit, die Webpack-Konfiguration zu ändern. 

Es gibt ein geschlossenes "wont-fix" Problem auf github: https://github.com/angular/angular-cli/issues/1656

11
j2L4e

Was ich denke ist, dass Webpack einfach ist, wenn die Produktionsversion veröffentlicht wird. 

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

0
Piusha

Gemäß dem Vorschlag von ng eject können Sie ngx-build-plus verwenden.

Es gibt mehrere Projekte, die in Verbindung mit dem neuen .__ verwendet werden können. Konfigurationsformat, das die Vorteile des Auswerfens ohne Wartung bietet Overhead. Ein solches Projekt ist ngx-build-plus hier zu finden: https://github.com/manfredsteyer/ngx-build-plus

0
Ravi Sevta