Angular CLI自定义Webpack配置

角度式 Webpack

Tony飞云

2020-04-07

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

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

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

第4107篇《Angular CLI自定义Webpack配置》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

DavaidTony宝儿 2020.04.07

由于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。

老丝阿飞 2020.04.07

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

您可以使用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"
              ...
       }