angular-customize-webpack

Angular 隐藏了项目构建的细节，其构建过程通过各种Builder来实现，底层可以使用Webpack或者ESBuild（从Angular17开始，默认使用ESBuild），那么我们需要修改Webpack配置怎么办呢？其实只有一个办法，那就是通过第三方npm package，这里介绍目前流行的两个。

ngx-build-plus - Angular Module Federation也是用的这个package来做Webpack定制化。
@angular-builders/custom-webpack

这两者的实现原理也比较简单，都是通过继承@angular-devkit/build-angular来实现的。

下面我们分别看看，这两个package的使用方法。

ngx-build-plus

Installation

1	npm install ngx-build-plus --save-dev

Usage

angular.json(for Angular project) or project.json(For Nx based mono repo)

{
  "architect": {
    "build": {
      "builder": "ngx-build-plus:browser", // change builder
      "options": {
        "extraWebpackConfig": "extra-webpack.config.js" // supply a path to the custom webpack config
      }
    }
  }
}

@angular-builders/custom-webpack

Installation

1	npm install @angular-builders/custom-webpack --save-dev

Usage

angular.json(for Angular project) or project.json(For Nx based mono repo)

{
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser", // change builder
      "options": {
        "customWebpackConfig": {
          "path": "./extra-webpack.config.js", // supply a path to the custom webpack config
          "mergeStrategies": { "externals": "replace" }
        }
      }
    }
  }
}

How to choose?

If you are using Angular Module Federation, you should use ngx-build-plus, and it is installed automatically when you create a new Angular project with Angular Module Federation. This package has not been upgraded for a long time, but it is still working. ngx-build-plus support hooks.
If you are not using Angular Module Federation, you can choose either of them, but @angular-builders/custom-webpack is more popular. This package is upgraded frequently.