Angular CLI webpack.config.js文件在哪里？新的Angular6不支持ng eject。

Question

Angular CLI webpack.config.js文件在哪里？新的Angular6不支持ng eject。

angularwebpackangular-cli

149

更新：2018年12月（请参阅“Aniket”的答案）

使用 Angular CLI 6，您需要使用 builders，因为 ng eject 已被弃用，并将很快在 8.0 中删除

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

更新：2017年2月：使用 ng eject

更新：2016年11月：angular-cli 现在仅使用 webpack。您只需要使用 npm install -g angular-cli 正常安装即可。“我们在 beta.10 和 beta.14 之间更改了构建系统，从 SystemJS 到 Webpack。”但实际上我仅使用 angular-cli 来创建结构和文件夹，然后手动使用 webpack 配置。

我已使用以下命令安装了 Angular CLI：

npm install -g angular-cli@webpack

当我使用Angular1和Webpack时，我习惯于修改“webpack.config.js”文件来执行所有任务和插件，但是在使用angular-cli创建的此项目中，我没有看到它是如何工作的。这是魔法吗？

我发现当我执行以下操作时，Webpack正在工作：

ng serve 

"Version: webpack 2.1.0-beta.18"

但我不理解angular-cli配置的工作方式...

- stackdave

这是内置在Angular2 CLI附加组件中的。没有任何魔法，只是简化了一些。 - Jorawar Singh

3

谢谢 @MrJSingh，但是是否已经有配置文件了？还是仅与 angular-cli.json 一起工作？我不需要更多的配置插件吗？ - stackdave

这是AT: node_modules@ngtools - bharatpatel

1

Angular 6.0.8目前不支持ng eject。 - Robert Love

4

我喜欢原帖作者在发布近一年后仍然更新正确答案的做法。 - Luminous

显示剩余2条评论

4个回答

55

根据这个问题，不允许用户修改Webpack配置是出于设计考虑，以减少学习曲线。

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

我不建议在生产应用中使用angular-cli，因为它有很强的主观意见。

- Ignatius Andrew

9

在了解架构的每个流程之前，不建议进入黑匣子，如果在项目开发中有些内容不受支持或无法定制，这可能会非常昂贵。 - Ignatius Andrew

38

使用 Angular CLI 6，需要使用构建器，因为 ng eject 已经被弃用，并将在 8.0 版本中很快被删除。这就是当我尝试执行ng eject时显示的内容。

你可以使用 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",

请注意，构建器在serve目标中再次发生了改变。在进行这些更改后，您可以在相同的根目录下创建一个名为custom-webpack.config.js的文件，并在其中添加您的webpack配置。

但是，与ng eject不同，此处提供的配置将与默认配置合并，因此只需添加您想要编辑/添加的内容即可。

- Aniket Thakur

4

很好。在Angular文档中应该提及一种调整webpack配置的方法，这对像我这样的新手会有所帮助。 - Wajahath

这个angular-builders设置对我不起作用，ng serve在5秒后就退出了，没有任何输出。我的项目使用的是Angular CLI 7和Angular Core 5。 - tedw

在 package.json 的“scripts”属性中，我需要做出任何更改吗？ - Krishna Prashatt

请注意，在 Angular 8 的 angular-builders 版本中，"@angular-builders/dev-server:generic 已被弃用。请改用 @angular-builders/custom-webpack:dev-server。"（https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD#dev-server-builder）你能否更新这个答案以反映这一点？ - Brian McCutchon

1

https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack - 这非常简单... - 在 Angular 9 Universal Ivy 中可用 - Jonathan

11

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

过时了:

您可以在angular-cli/addon/ng2/models中修改配置模板。目前还没有官方的修改webpack配置的方法。

Github上有一个已关闭的"wont-fix"问题：https://github.com/angular/angular-cli/issues/1656

- j2L4e

1

最后我使用了这个基础框架，angular-cli并没有准备好与webpack一起进行实际工作，存在很多问题。我建议使用这个：https://github.com/webpack/webpack-dev-server - stackdave

5

我很难过，问题已被标记为“不予实现”。 :-( - monnef

1

还有一个 http://npmjs.com/~ngtools 网址，您可以在那里获取运行 CLI 独立版的 webpack。请参见 https://youtu.be/uBRK6cTr4Vk?t=7m57s。 - Mikeumus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anton Nikiforov · Accepted Answer

有一个简便的方法可以从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）。