angular-cli在哪里是webpack.config.js文件 - 新的angular6不支持ng彈出

Question

更新：2018年12月（參見'Aniket'回答）

使用Angular CLI 6，您需要使用構建器，因為不推薦使用ng eject，並且很快將在8.0中刪除

更新：2018年6月：Angular 6不支持ng彈出**

更新：2017年2月：使用ng彈出

更新：2016年11月：angular-cli現在只使用webpack。 您只需要使用npm install -g angular-cli正常安裝。 “我們改變了beta.10和beta.14之間的構建系統，從SystemJS到Webpack。”但實際上我只使用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配置的工作方式......

Answer 1

有一種從angular-cli中彈出webpack.config.js的好方法。 趕緊跑：

$ ng eject

這將在項目的根文件夾中生成webpack.config.js，您可以根據需要自由配置它。 這樣做的缺點是package.json中的build / start腳本將被替換為新命令而不是

$ ng serve

你必須要做類似的事情

$ npm run build & npm run start

這個方法應該適用於所有最新版本的angular-cli（我個人試過幾個，最老的是1.0.0-beta.21 ，最新的1.0.0-beta.32.3 ）

Answer 2

根據這個問題 ，設計決定是不允許用戶修改Webpack配置以減少學習曲線。

考慮到Webpack上有用的配置數量，這是一個很大的缺點。

我不建議將angular-cli用於生產應用程序，因為它是高度自以為是。

Answer 3

使用Angular CLI 6，您需要使用構建器，因為不推薦使用ng eject，並且很快將在8.0中刪除。 當我嘗試進行彈出時，它就是這么說的

您可以使用angular-builders包（ https://github.com/meltedspark/angular-builders ）來提供自定義webpack配置。

我試圖在我的博客上的一篇博客文章中總結所有內容 - 如何使用Angular CLI 6中的自定義webpack配置自定義構建配置

但基本上你添加以下依賴項 -

  "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的文件，並在其中添加您的webpack配置。

但是，與此處提供的ng彈出配置不同，它將與默認配置合並，因此只需添加要編輯/添加的內容。

Answer 4

現在可以彈出CLI的webpack配置。 檢查Anton Nikiforov的回答 。

---

過時的：

您可以在angular-cli/addon/ng2/models破解配置模板。 截至目前，還沒有正式的方法來修改webpack配置。

關於這個問題，github上有一個封閉的“不會修復”問題： https ： //github.com/angular/angular-cli/issues/1656

Answer 5

我想的是在生產發布時讓webpack很容易。

僅供參考： https ： //github.com/Piusha/ngx-lazyloading

Answer 6

根據ng eject的建議，您可以使用ngx-build-plus

有幾個項目可以與新的配置格式結合使用，提供彈出的好處，而無需維護開銷。 其中一個項目是ngx-build-plus，請點擊此處： https ： //github.com/manfredsteyer/ngx-build-plus