Angular CLI 6:自定义webpack配置

Question

在以前的Angular版本中,有一个弹出选项,以便您可以根据需要修改webpack配置.
此功能最常见的用例之一是添加自定义webpack加载器.

在Angular 6中,此选项已暂时禁用,因此目前无法获取webpack配置(除了在角度源代码中查找).似乎他们将在6.1(或许不是)中启用此功能,但在此之前它不可用.

有没有办法将自定义webpack配置添加到使用@ angular/cli 6的Angular 6应用程序？或者,有没有办法"弹出"新的Angular CLI在引擎盖下使用的webpack配置？

Answer 1

免责声明:我是以下图书馆的所有者

您可以使用angular-builders库,它允许您使用自定义webpack配置扩展现有目标browser和server目标.

用法非常简单:

1. 安装库: npm i -D @angular-builders/custom-webpack

2. 修改你的angular.json:

   "architect": {
      ...
      "build": {
          "builder": "@angular-builders/custom-webpack:browser"
          "options": {
                 "customWebpackConfig": {
                    "path": "./extra-webpack.config.js",
                    "replaceDuplicatePlugins": true
                 },
                 "outputPath": "dist/my-cool-library",
                 "index": "src/index.html",
                 "main": "src/main.ts",
                 "polyfills": "src/polyfills.ts",
                 "tsConfig": "src/tsconfig.app.json"
                 ...
          }
   

3. 将extra-webpack.config.js添加到应用程序的根目录
4. 将额外的配置放在extra-webpack.config.js中(只是一个简单的webpack配置)

在这里,您可以找到添加node-loader到浏览器配置的示例.

进一步阅读:
定制Angular CLI 6构建 - ng弹出的替代方案

Answer 2

对于 Angular 8@angular-builders/dev-server:generic已被弃用并@angular-builders/custom-webpack:dev-server正在使用，来源：https : //github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD。

最重要的是，npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest如果迁移后您会看到以下错误，您可能需要运行architect_1.createBuilder is not a function。