angular - Angular CLI 自定义 webpack 配置

Question

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

在 Angular 6 中，这个选项已被删除，因此目前实际上没有办法获取 webpack 配置（除了在 Angular 源代码中查找它）。

有没有办法将自定义 webpack 配置添加到使用 @angular/cli 6+ 的 Angular 应用程序？或者，有什么方法可以“弹出”新的 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到浏览器配置的示例。

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。