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

131

更新：2018年12月（请参阅``Aniket''答案）

使用Angular CLI 6时，您需要使用构建器，因为不建议使用ngject，并且很快将在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 config

我已经安装了角度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配置的工作方式...

angular webpack angular-cli

— Stackdave
source

它内置在angular2 cli中。没有魔术可以简化。

— 乔拉瓦·辛格

3

感谢@MrJSingh，但是有没有配置文件？或者只是与angular-cli.json一起使用？我不需要更多的配置插件？

— stackdave

它是AT：node_modules \ @ngtools

— bharatpatel

1

Angular 6.0.8当前不支持ng eject

— Robert Love

4

我喜欢OP在发布后将近一年如何更新正确答案。

— 发光的

34

使用Angular CLI 6时，您将需要使用构建器，因为不建议使用ng jet，并且很快将在8.0中将其删除。这就是我尝试进行ng弹出时所说的

您可以使用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弹出配置不同，此处将与默认配置合并，因此只需添加要编辑/添加的内容即可。

— 阿妮克特·塔库尔（Aniket Thakur）
source

4

真好角度文档中应提及一种用于调整webpack配置的方法。它可以帮助像我这样的新来者。

— Wajahath

此角度生成器设置对我不起作用，ng serve仅在5秒钟后退出且没有输出。我的项目使用角cli 7和

— 角铁5。– tedw

我必须对package.json的scripts属性进行任何更改吗？

— 克里希纳·普拉沙特

请注意，在Angular 8的angular-builders版本中，“ @angular-builders/dev-server:generic已弃用。@angular-builders/custom-webpack:dev-server改为使用。” 您能否更新此答案以反映这一点？

— Brian McCutchon

1

github.com/just-jeb/angular-builders/tree/master/packages/…-关于此的非常简单的说明...-适用于Angular 9 Universal Ivy

— Jonathan

153

有一个弹出的好方法从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）

— 安东·尼基福罗夫（Anton Nikiforov）
source

1

唯一的麻烦是它仅弹出开发环境配置。您可以将一个参数添加到ng弹出菜单中，

— jtsnr

我要求确定@bebebe github.com/angular/angular-cli/issues/4907。

— Kunepro

@bebebe请看这里stackoverflow.com/questions/42984558/...

— 安东尼基福罗夫

@AntonNikiforov弹出后如何配置Webpack？我觉得webpack配置文件看起来太复杂了。我弹出它的原因是因为我想在项目中使用postcss，但cli目前不支持它。

— Ng2-Fun

如何运行ng build -w？npm run build -w不起作用，ng build --prod和ng build -d“ something”相同

— Victor Bredihin

49

根据此问题，一项设计决定是不允许用户修改Webpack配置以减少学习难度。

考虑到Webpack上有用配置的数量，这是一个很大的缺点。

我不建议将其angular-cli用于生产应用程序，因为它是自以为是的。

— 伊格纳修斯·安德鲁（Ignatius Andrew）
source

8

在您了解架构的每个流程之前，不建议您进入黑匣子。如果不支持某些流程或在项目开发过程中无法对其进行自定义，则可能会非常昂贵。

— 伊格纳修斯·安德鲁

11

现在可以弹出CLI的webpack配置。检查Anton Nikiforov的答案。

过时的：

您可以在中修改配置模板angular-cli/addon/ng2/models。到目前为止，尚无官方方法来修改webpack配置。

github上有一个关于此的封闭的“ wont-fix”问题：https : //github.com/angular/angular-cli/issues/1656

— j2L4e
source

1

最终，我使用了这个框架，angular-cli尚未准备好与webpack一起实际使用，存在很多问题。我建议使用以下代码： github.com/webpack/webpack-dev-server

— stackdave

5

很遗憾，该问题已作为“无法实施”而关闭。:-(

— monnef '16

1

还有npmjs.com/~ngtools，您可以在其中获取独立运行CLI的Webpack。参见youtu.be/uBRK6cTr4Vk?t=7m57s

— Mikeumus

0

我在想，发布产品时使用webpack会很容易。

仅供参考：https : //github.com/Piusha/ngx-lazyloading

— 皮乌莎
source

-1

根据ng eject您的建议可以使用ngx-build-plus

有几个项目可以与新的配置格式结合使用，这些项目可以带来弹出的好处而无需维护。ngx-build-plus就是一个这样的项目，可以在这里找到：https : //github.com/manfredsteyer/ngx-build-plus

— 拉维·塞夫塔（Ravi Sevta）
source