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


132

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 ...


Ini dibangun di menambahkan angular2 cli. Tidak ada sihir yang disederhanakan.
Jorawar Singh

3
terima kasih @ MrJSingh, tetapi apakah sudah ada file konfigurasi? atau hanya bekerja dengan angular-cli.json? saya tidak perlu lebih banyak plugin konfigurasi?
stackdave

Ini adalah AT: node_modules \ @ngtools
bharatpatel

1
Angular 6.0.8 saat ini tidak mendukungng eject
Robert Love

4
Saya suka bagaimana OP memperbarui jawaban yang benar hampir setahun setelah memposting.
Luminous

Jawaban:


34

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

masukkan deskripsi gambar di sini

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.


4
Bagus. Metode untuk mengubah ke konfigurasi webpack harus disebutkan dalam dokumen sudut. Ini membantu pendatang baru seperti saya.
Wajahath

Setup angular-builders ini tidak berfungsi untuk saya, ng servehanya keluar setelah 5 detik tanpa output. Proyek saya menggunakan angular cli 7 dan angular core 5.
tedw

Apakah ada perubahan yang harus saya lakukan pada scriptsproperti package.json ?
Krishna Prashatt

Perhatikan bahwa, dalam versi pembangun sudut untuk Angular 8, " @angular-builders/dev-server:generictelah ditinggalkan. Gunakan @angular-builders/custom-webpack:dev-serversaja." Bisakah Anda memperbarui jawaban ini untuk mencerminkan hal itu?
Brian McCutchon

1
github.com/just-jeb/angular-builders/tree/master/packages/… - instruksi yang sangat sederhana untuk ini ... - bekerja di Angular 9 Universal Ivy
Jonathan

153

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 )


1
Satu-satunya frustrasi adalah bahwa ia hanya mengeluarkan konfigurasi lingkungan dev. Ada argumen yang dapat Anda tambahkan ke contoh untuk menggunakan konfigurasi produksi sebagai gantinya, tetapi ini saat ini tidak berfungsi github.com/angular/angular-cli/issues/5433
jtsnr

@bebebe github.com/angular/angular-cli/issues/4907 Saya sudah meminta untuk memastikan.
Kunepro


@AntonNikiforov Bagaimana cara mengkonfigurasi webpack setelah dikeluarkan? Saya merasa file konfigurasi webpack terlihat sangat rumit. Alasan saya mengeluarkannya adalah karena saya ingin menggunakan postcss dalam proyek saya tetapi cli tidak mendukungnya sekarang.
Ng2-Fun

bagaimana menjalankan ng build -w? npm run build -w tidak berfungsi, sama untuk ng build --prod dan ng build -d "sesuatu"
Victor Bredihin

49

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.


8
Tidak disarankan untuk memasukkan kotak hitam sampai Anda memahami setiap aliran arsitektur, itu bisa sangat mahal jika beberapa tidak didukung atau tidak dapat dikustomisasi di tengah pengembangan proyek.
Ignatius Andrew

11

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


1
akhirnya saya menggunakan kerangka ini, angular-cli belum siap untuk pekerjaan nyata dengan webpack, punya banyak masalah. Saya sarankan menggunakan ini: github.com/webpack/webpack-dev-server
stackdave

5
Saya sedih, masalah ini ditutup karena "tidak akan diterapkan". :-(
monnef

1
Ada juga npmjs.com/~ngtools di mana Anda bisa mendapatkan paket web yang menjalankan CLI standalone. Lihat youtu.be/uBRK6cTr4Vk?t=7m57s
Mikeumus


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.