angular-cliwebpack.config.js文件-新建angular6不支持ng弹出

Question

更新：2018年12月（见“阿尼凯特”答案）

使用 Angular CLI 6 时，您需要使用生成器，因为 ng 弹出已弃用，并且很快就会在 8.0 中删除

更新：2018 年 6 月：角度 6 不支持 ng 弹出**

更新:2017年2月:使用ng弹射

更新：2016 年 11 月：角度 cli 现在只使用 web 包。您只需要使用 npm 安装 -g 角度-cli 进行正常安装。“我们在beta.10和beta.14之间更改了构建系统，从SystemJS更改为Webpack.”，但实际上我只使用角-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"

但我不理解角度cli-config的工作方式。。。

Answer 1

使用Angular CLI 6，您需要使用构建器，因为ng弹出已被弃用，很快将在8.0中删除。这就是我尝试执行ng弹出时所说的

您可以使用角度生成器包(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"},

请注意生成器和新选项自定义的更改。同时更改

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

再次注意serve target的builder中的更改。发布这些更改后，您可以创建一个名为custom-webpack.config的文件。在同一根目录中添加js，并在其中添加webpack配置。

然而，与ng不同，这里提供的弹出配置将与默认配置合并，所以只需添加您想要编辑/添加的内容。

Answer 2

根据这个问题，设计决定不允许用户修改Webpack配置以减少学习曲线。

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

我不建议在生产应用中使用角度-cli，因为它非常固执己见。

Answer 3

有一个很好的方法可以弹出 webpack.config.js从角度-cli.只需运行：

$ 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)