Angular Custom Webpack Config (angular.json, architect target)

README.md

Ever wondered how to build a custom webpack config for Angular? I did and I jsut stumbled upon this file in the repository https://github.com/manfredsteyer/ngx-build-plus which aims to help building multiple standalone Angular Elements.

I quickly spotted this part in the angular.json which will replace the default browser build.

"architect": {
    "build": {
      "builder": "ngx-build-plus:build",
    }

I already know about the potential the schematics give us but I never thought that the CLI team already exposed parts of the webpack config generation. It seems that you can override it through your own build target. The build ngx-build-plus:build mentioned above looks like this (reduced):

export class PlusBuilder extends BrowserBuilder  {

  buildWebpackConfig(
    root: Path,
    projectRoot: Path,
    host: virtualFs.Host<fs.Stats>,
    options: PlusBuilderSchema,
  ) {

    let config = super.buildWebpackConfig(root, projectRoot, host, options);
    
    if (options.extraWebpackConfig) {
      console.log('futher modify the config with this path', options.extraWebpackConfig)
    }

    return config;
  }
}

That options are inputs coming straight from the CLI.

ng build --prod --extraWebpackConfig true

THis works like a hook in the webpack config generation process. super.buildWebpackConfig returns the webpack config used by the CLI and you can modify it before finally returning it.

Awesome Technology 😍