webpack.config.js 파일 인 angular-cli-새로운 angular6는 ng eject를 지원하지 않습니다

업데이트 : 2018 년 12 월 ( 'Aniket'답변 참조)

Angular CLI 6에서는 ng eject가 더 이상 사용되지 않으며 8.0에서 곧 제거 될 예정이므로 빌더를 사용해야합니다.

업데이트 : 2018 년 6 월 : Angular 6은 ng eject를 지원하지 않습니다 **

업데이트 : 2017 년 2 월 : ng eject 사용

업데이트 : 2016 년 11 월 : angular-cli는 이제 웹팩 만 사용합니다. npm install -g angular-cli를 사용하여 정상적으로 설치하면됩니다. "우리는 SystemJS에서 Webpack으로 beta.10과 beta.14 사이에서 빌드 시스템을 변경했습니다."그러나 실제로 angular-cli를 사용하여 구조와 폴더를 실행 한 다음 더 이상 webpack 구성을 수동으로 사용합니다.

이 각도 cli를 설치했습니다.

npm install -g angular-cli@webpack

angular1 및 web pack 작업 할 때 모든 작업과 플러그인을 실행하기 위해 "webpack.config.js"파일을 수정하는 데 사용했지만 angular-cli로 만든이 프로젝트에서는 작동하지 않습니다. 마술이야?

내가 할 때 Webpack이 작동하는 것을 봅니다.

ng serve 

"Version: webpack 2.1.0-beta.18"

하지만 angular-cli config가 작동하는 방식을 이해하지 못합니다 ...

Angular CLI 6에서는 ng eject가 더 이상 사용되지 않으며 8.0에서 곧 제거 될 예정이므로 빌더를 사용해야합니다. 그게 내가 꺼내 려고 할 때 말하는 것입니다.

angular-builders 패키지 ( https://github.com/meltedspark/angular-builders )를 사용하여 사용자 정의 웹팩 구성을 제공 할 수 있습니다.

내 블로그의 단일 블로그 게시물에서 모두 요약하려고 했습니다. Angular CLI 6에서 사용자 정의 웹 팩 구성으로 빌드 구성을 사용자 정의하는 방법

그러나 본질적으로 다음과 같은 종속성을 추가합니다.

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

에서 angular.json 변경 사항을 다음 -

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

빌더 및 새 옵션 customWebpackConfig의 변경 사항을 확인하십시오. 또한 변경

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

제공 대상에 대한 빌더의 변경 사항을 다시 확인하십시오. 이러한 변경 사항을 게시하면 동일한 루트 디렉토리에 custom-webpack.config.js 라는 파일을 작성하고 거기에 웹팩 구성을 추가 할 수 있습니다.

그러나 여기에 제공된 꺼내기 구성 과 달리 기본 구성과 병합되므로 편집 / 추가하려는 항목을 추가하십시오.

angular-cli 에서 webpack.config.js 를 추출하는 좋은 방법이 있습니다 . 그냥 실행 :

$ ng eject

프로젝트의 루트 폴더에 webpack.config.js가 생성되며 원하는 방식으로 자유롭게 구성 할 수 있습니다. 이것의 단점은 package.json의 빌드 / 시작 스크립트가 새로운 명령으로 대체되고 대신에

$ ng serve

당신은 같은 것을해야 할 것입니다

$ npm run build & npm run start

이 방법은 모든 최신 버전의 angular-cli에서 작동해야합니다 (가장 오래된 버전은 1.0.0-beta.21 이고 최신 버전은 1.0.0-beta.32.3 ).

이 문제 에 따르면 , 사용자가 학습 곡선을 줄이기 위해 웹팩 구성을 수정할 수 없도록하는 것은 디자인 결정이었습니다.

Webpack의 유용한 구성 수를 고려하면 이는 큰 단점입니다.

angular-cli의견이 많으므로 프로덕션 응용 프로그램에 사용하지 않는 것이 좋습니다 .

CLI의 웹팩 구성을 꺼낼 수 있습니다. Anton Nikiforov의 답변을 확인하십시오 .

시대에 뒤쳐진:

에서 설정 템플릿을 해킹 할 수 있습니다 angular-cli/addon/ng2/models. 현재 웹팩 설정을 수정하는 공식적인 방법은 없습니다.

github에는 다음과 같이 닫힌 "원시 수정"문제가 있습니다. https://github.com/angular/angular-cli/issues/1656

내가 생각하는 것은 생산 릴리스시 웹팩이 쉽다는 것입니다.

참고 : https://github.com/Piusha/ngx-lazyloading

ng eject당신 의 제안에 따라 사용할 수 있습니다ngx-build-plus

유지 관리 오버 헤드없이 배출의 이점을 제공하는 새로운 구성 형식과 함께 사용할 수있는 여러 프로젝트가 있습니다. 그러한 프로젝트 중 하나는 ngx-build-plus입니다. https://github.com/manfredsteyer/ngx-build-plus