Angular CLI 自定义 webpack 配置

Question

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

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

在使用@angular/cli 6+的Angular应用程序中是否有任何方法可以添加自定义webpack配置？或者，有没有任何方法可以“弹出”新的Angular CLI在幕后使用的webpack配置？

- JeB

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"
              ...
       }

将extra-webpack.config.js添加到您的应用程序根目录中

将额外的配置放入extra-webpack.config.js中（只是一个简单的webpack配置）

• 快速指南
• 完整文档
• 示例，向浏览器配置添加node-loader。

- JeB

---

我无法在我的项目中使其工作。它根本不会加载extra-webpack.config.js文件。我按照说明安装了所有依赖项。有什么调试提示吗？ - Timo

@JustAMartin https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs - JeB

@JeB 只是好奇：@angular-builders/custom-webpack 和 @angular-devkit/build-webpack 有什么不同？它们是针对同一个问题的不同解决方案，还是它们解决了两个根本不同的问题？它们之间有什么比较吗？ - Kiran

后者。build-webpack只是使用您提供的配置运行webpack构建（或webpack-dev-server）。没有其他功能涉及。可以将其视为使用Angular CLI运行webpack构建的方法。另一方面，@angular-builders/custom-webpack在运行默认的Angular构建链的同时，允许通过提供delta Webpack配置来定制此构建，以补充默认的构建配置。 - JeB

@JeB 你好，使用你的最新库版本，是否可以在 webpack.config.js 中指定特定的配置，该文件导出多个配置，还是需要另一个单独的配置文件？ - CrystalSpider

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。

除此之外，如果迁移后出现错误 architect_1.createBuilder is not a function，您可能还需要运行 npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest。

- Daniel Danielecki