angular-cli, gdzie jest plik webpack.config.js - nowy angular6 nie obsługuje wyrzucania

AKTUALIZACJA: grudzień 2018 (patrz odpowiedź „Aniket”)

W Angular CLI 6 musisz używać konstruktorów, ponieważ ng eject jest przestarzały i wkrótce zostanie usunięty w wersji 8.0

AKTUALIZACJA: czerwiec 2018: Angular 6 nie obsługuje wysuwania **

AKTUALIZACJA: Luty 2017: użyj ng eject

AKTUALIZACJA: Listopad 2016: angular-cli używa teraz tylko webpacka. Musisz tylko zainstalować normalnie za pomocą npm install -g angular-cli. „Zmieniliśmy system kompilacji z beta.10 na beta.14, z SystemJS na Webpack.”, Ale tak naprawdę używam angular-cli tylko do pierwszej struktury i folderów, a potem używam ręcznie konfiguracji webpack

Zainstalowałem kątowe CLI z tym:

npm install -g angular-cli@webpack

Kiedy pracowałem z angular1 i web pack, modyfikowałem plik „webpack.config.js”, aby wykonać wszystkie zadania i wtyczki, ale nie widzę w tym projekcie utworzonym za pomocą angular-cli, kto to robi. to magia?

Widzę, że Webpack działa, gdy:

ng serve 

"Version: webpack 2.1.0-beta.18"

ale nie rozumiem, jak działa konfiguracja angular-cli ...

W Angular CLI 6 musisz używać konstruktorów, ponieważ ng eject jest przestarzałe i wkrótce zostanie usunięte w 8.0. To właśnie mówi, kiedy próbuję wyrzucić ng

Możesz użyć pakietu angular-builders ( https://github.com/meltedspark/angular-builders ), aby zapewnić niestandardową konfigurację pakietu webpack.

Próbowałem podsumować wszystko w jednym poście na moim blogu - Jak dostosować konfigurację kompilacji za pomocą niestandardowej konfiguracji pakietu internetowego w Angular CLI 6

ale zasadniczo dodajesz następujące zależności -

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

W angular.json wprowadź następujące zmiany -

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

Zwróć uwagę na zmianę w konstruktorze i nową opcję customWebpackConfig. Zmień też

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

Zwróć uwagę na zmianę w konstruktorze dla celu wyświetlenia. Opublikuj te zmiany, możesz utworzyć plik o nazwie custom-webpack.config.js w tym samym katalogu głównym i dodać tam konfigurację pakietu internetowego.

Jednak w przeciwieństwie do konfiguracji ng eject podana tutaj zostanie scalona z domyślną konfiguracją, więc po prostu dodaj rzeczy, które chcesz edytować / dodać.

Jest fajny sposób na wyrzucenie webpack.config.js z angular -cli . Po prostu biegnij:

$ ng eject

Spowoduje to wygenerowanie pliku webpack.config.js w folderze głównym projektu i możesz go skonfigurować tak, jak chcesz. Wadą tego jest to, że skrypty budowania / uruchamiania w pliku package.json zostaną zastąpione nowymi poleceniami i zamiast

$ ng serve

musiałbyś zrobić coś takiego

$ npm run build & npm run start

Ta metoda powinna działać we wszystkich ostatnich wersjach angular-cli (osobiście wypróbowałem kilka, z których najstarsza to 1.0.0-beta.21 , a najnowsza 1.0.0-beta.32.3 )

Zgodnie z tym wydaniem była decyzja projektowa, aby nie zezwolić użytkownikom na modyfikowanie konfiguracji Webpack w celu skrócenia krzywej uczenia się.

Biorąc pod uwagę liczbę przydatnych konfiguracji w Webpack, jest to duża wada.

Nie polecam używania angular-clido zastosowań produkcyjnych, ponieważ jest to wysoce uparte.

Można teraz wysunąć konfigurację pakietu internetowego interfejsu wiersza polecenia. Sprawdź odpowiedź Antona Nikiforowa .

przestarzały:

Możesz zhakować szablon konfiguracji w angular-cli/addon/ng2/models. Obecnie nie ma oficjalnego sposobu na modyfikację konfiguracji pakietu internetowego.

Na githubie jest zamknięty problem „nie do naprawienia” na ten temat: https://github.com/angular/angular-cli/issues/1656

Myślę, że posiadanie webpacka byłoby łatwe w momencie wydania produkcyjnego.

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

Zgodnie z sugestią ng ejectmożesz użyćngx-build-plus

Istnieje kilka projektów, których można używać w połączeniu z nowym formatem konfiguracji, które zapewniają korzyści wynikające z wysuwania bez kosztów konserwacji. Jednym z takich projektów jest ngx-build-plus, który można znaleźć tutaj: https://github.com/manfredsteyer/ngx-build-plus