angular-cli tập tin webpack.config.js - angular6 mới không hỗ trợ ng đẩy

CẬP NHẬT: Tháng 12 năm 2018 (xem câu trả lời 'Aniket')

Với Angular CLI 6, bạn cần sử dụng các trình xây dựng vì ng eject không được dùng nữa và sẽ sớm bị xóa trong 8.0

CẬP NHẬT: Tháng 6 năm 2018: Angular 6 không hỗ trợ ng đẩy **

CẬP NHẬT: Tháng 2 năm 2017: sử dụng ng eject

CẬP NHẬT: Tháng 11 năm 2016: angular-cli hiện chỉ sử dụng webpack. Bạn chỉ cần cài đặt bình thường với npm install -g angular-cli. "Chúng tôi đã thay đổi hệ thống xây dựng giữa beta.10 và beta.14, từ SystemJS sang Webpack.", Nhưng thực sự tôi sử dụng angular-cli chỉ để cấu trúc và thư mục linh hoạt

Tôi đã cài đặt cli góc với cái này:

npm install -g angular-cli@webpack

Khi tôi làm việc với angular1 và gói web, tôi đã sử dụng để sửa đổi tệp "webpack.config.js" để thực thi tất cả các tác vụ và plugin, nhưng tôi không thấy dự án này được tạo với angular-cli, nó hoạt động. đó là ma thuật?

Tôi thấy Webpack đang hoạt động khi tôi làm:

ng serve 

"Version: webpack 2.1.0-beta.18"

nhưng tôi không hiểu cách thức cấu hình angular-cli ...

Với Angular CLI 6, bạn cần sử dụng các trình xây dựng vì ng eject không được dùng nữa và sẽ sớm bị xóa trong 8.0. Đó là những gì nó nói khi tôi cố gắng thực hiện một đẩy ra

Bạn có thể sử dụng gói xây dựng góc ( https://github.com/meltedspark/angular-builders ) để cung cấp cấu hình gói web tùy chỉnh của bạn.

Tôi đã cố gắng tóm tắt tất cả trong một bài đăng blog trên blog của mình - Cách tùy chỉnh cấu hình bản dựng với cấu hình webpack tùy chỉnh trong Angular CLI 6

nhưng về cơ bản, bạn thêm các phụ thuộc sau -

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

Trong angular.json thực hiện các thay đổi sau -

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

Thông báo thay đổi trong trình xây dựng và tùy chọn mới customWebpackConfig. Cũng thay đổi

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

Lưu ý thay đổi trong trình xây dựng một lần nữa cho mục tiêu phục vụ. Đăng những thay đổi này, bạn có thể tạo một tệp có tên custom-webpack.config.js trong cùng thư mục gốc của bạn và thêm cấu hình webpack của bạn vào đó.

Tuy nhiên, không giống như cấu hình ng eject được cung cấp ở đây sẽ được hợp nhất với cấu hình mặc định, vì vậy chỉ cần thêm nội dung bạn muốn chỉnh sửa / thêm.

Có một cách hay để đẩy webpack.config.js khỏi angular-cli . Chỉ cần chạy:

$ ng eject

Điều này sẽ tạo webpack.config.js trong thư mục gốc của dự án của bạn và bạn có thể tự do định cấu hình nó theo cách bạn muốn. Nhược điểm của điều này là các tập lệnh xây dựng / bắt đầu trong gói.json của bạn sẽ được thay thế bằng các lệnh mới và thay vì

$ ng serve

bạn sẽ phải làm một cái gì đó như

$ npm run build & npm run start

Phương pháp này sẽ hoạt động trong tất cả các phiên bản gần đây của angular-cli (cá nhân tôi đã thử một vài phiên bản, với phiên bản cũ nhất là 1.0.0-beta.21 và mới nhất là 1.0.0-beta.32.3 )

Theo vấn đề này , đó là một quyết định thiết kế không cho phép người dùng sửa đổi cấu hình Webpack để giảm thời gian học tập.

Xem xét số lượng cấu hình hữu ích trên Webpack, đây là một nhược điểm lớn.

Tôi sẽ không khuyên bạn nên sử dụng angular-clicho các ứng dụng sản xuất, vì nó rất được quan tâm.

Cấu hình webpack của CLI hiện có thể được đẩy ra. Kiểm tra câu trả lời của Anton Nikiforov .

lỗi thời:

Bạn có thể hack mẫu cấu hình trong angular-cli/addon/ng2/models. Cho đến nay không có cách chính thức nào để sửa đổi cấu hình webpack.

Có một vấn đề "không sửa chữa" đã đóng trên github về vấn đề này: https://github.com/angular/angular-cli/issues/1656

Những gì tôi nghĩ là có webpack sẽ dễ dàng khi phát hành sản xuất.

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

Theo đề nghị của ng ejectbạn có thể sử dụngngx-build-plus

Có một số dự án có thể được sử dụng kết hợp với định dạng cấu hình mới cung cấp các lợi ích của việc phóng ra mà không cần chi phí bảo trì. Một dự án như vậy là ngx-build-plus được tìm thấy ở đây: https://github.com/manfredsteyer/ngx-build-plus