angular-cli di mana file webpack.config.js - new angular6 tidak mendukung eject

UPDATE: Desember 2018 (lihat jawaban 'Aniket')

Dengan Angular CLI 6 Anda harus menggunakan pembangun karena eject sudah usang dan akan segera dihapus di 8.0

UPDATE: Juni 2018: Angular 6 tidak mendukung eject **

UPDATE: Februari 2017: gunakan eject

UPDATE: November 2016: angular-cli sekarang hanya menggunakan webpack. Anda hanya perlu menginstal secara normal dengan npm install -g angular-cli. "Kami mengubah sistem build antara beta.10 dan beta.14, dari SystemJS ke Webpack.", Tetapi sebenarnya saya menggunakan angular-cli hanya untuk pertama kalinya struktur dan folder dan kemudian lagi, saya menggunakan konfigurasi webpack secara manual

Saya telah menginstal cli sudut dengan ini:

npm install -g angular-cli@webpack

Ketika saya bekerja dengan angular1 dan paket web, saya biasa memodifikasi file "webpack.config.js" untuk menjalankan semua tugas dan plugin, tetapi saya tidak melihat pada proyek ini dibuat dengan angular-cli siapa yang bekerja. itu sihir?

Saya melihat Webpack berfungsi ketika saya melakukannya:

ng serve 

"Version: webpack 2.1.0-beta.18"

tetapi saya tidak mengerti cara kerja angular-cli config ...

Dengan Angular CLI 6 Anda harus menggunakan pembangun karena eject sudah usang dan akan segera dihapus di 8.0. Itulah yang dikatakan ketika saya mencoba melakukan eject

Anda dapat menggunakan paket pembangun sudut ( https://github.com/meltedspark/angular-builders ) untuk memberikan konfigurasi webpack khusus Anda.

Saya telah mencoba untuk meringkas semua dalam satu posting blog di blog saya - Bagaimana cara menyesuaikan konfigurasi build dengan konfigurasi webpack kustom di Angular CLI 6

tetapi pada dasarnya Anda menambahkan dependensi berikut -

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

Di angular.json buat perubahan berikut -

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

Perhatikan perubahan builder dan opsi baru customWebpackConfig. Juga berubah

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

Perhatikan perubahan builder lagi untuk melayani target. Posting perubahan ini Anda dapat membuat file yang disebut custom-webpack.config.js di direktori root Anda yang sama dan menambahkan konfigurasi webpack Anda di sana.

Namun, tidak seperti konfigurasi eject yang disediakan di sini akan digabungkan dengan konfigurasi default jadi tambahkan saja hal-hal yang ingin Anda edit / tambahkan.

Ada cara yang bagus untuk mengeluarkan webpack.config.js dari angular-cli . Lari saja:

$ ng eject

Ini akan menghasilkan webpack.config.js di folder root proyek Anda, dan Anda bebas untuk mengonfigurasinya seperti yang Anda inginkan. Kelemahan dari ini adalah bahwa skrip build / start di package.json Anda akan diganti dengan perintah baru dan bukannya

$ ng serve

Anda harus melakukan sesuatu seperti

$ npm run build & npm run start

Metode ini harus bekerja di semua versi terbaru dari angular-cli (Saya pribadi mencoba beberapa, dengan yang tertua adalah 1.0.0-beta.21 , dan yang terbaru 1.0.0-beta.32.3 )

Menurut masalah ini , itu adalah keputusan desain untuk tidak mengizinkan pengguna untuk memodifikasi konfigurasi Webpack untuk mengurangi kurva belajar.

Mempertimbangkan jumlah konfigurasi yang berguna pada Webpack, ini adalah kelemahan yang bagus.

Saya tidak akan merekomendasikan penggunaan angular-cliuntuk aplikasi produksi, karena sangat disarankan.

Konfigurasi webpack CLI sekarang dapat dikeluarkan. Periksa jawaban Anton Nikiforov .

usang:

Anda dapat meretas template konfigurasi di angular-cli/addon/ng2/models. Tidak ada cara resmi untuk mengubah konfigurasi webpack seperti sekarang.

Ada masalah "tidak akan diperbaiki" pada github tentang hal ini: https://github.com/angular/angular-cli/issues/1656

Apa yang saya pikirkan adalah memiliki webpack akan mudah ketika produksi dirilis.

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

Sesuai saran ng ejectyang dapat Anda gunakanngx-build-plus

Ada beberapa proyek yang dapat digunakan bersamaan dengan format konfigurasi baru yang memberikan manfaat ejecting tanpa overhead pemeliharaan. Salah satu proyek tersebut adalah ngx-build-plus yang ditemukan di sini: https://github.com/manfredsteyer/ngx-build-plus