Angular CLI 自定义 webpack 配置

Question

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

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

是否有任何方法可以将自定义 webpack 配置添加到使用 @angular/cli 6+ 的 Angular 应用程序？或者，有没有什么方法可以 "eject" webpack 配置新的 Angular CLI 在幕后使用？

Answer 1

您可以使用 angular-builders 库，它允许您使用自定义 webpack 配置扩展现有的 browser 和 server 目标（以及更多）。

用法很简单：

安装库：npm i -D @angular-builders/custom-webpack

修改你的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配置）

Quick guide
Full documentation
An example 将 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。

Angular CLI 自定义 webpack 配置

Angular CLI custom webpack config

webpack

angular-cli

angular

webpack-loader