Angular CLI 自定义 webpack 配置

Question

在以前的 Angular 版本中，有一个选项 eject这样您就可以随意修改您的 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 配置)

• Quick guide
• Full documentation
• An example将 node-loader 添加到浏览器配置。