Skip to content

Instantly share code, notes, and snippets.



Last active Jul 27, 2018
What would you like to do?
Angular Custom Webpack Config (angular.json, architect target)

Ever wondered how to build a custom webpack config for Angular? I did and I jsut stumbled upon this file in the repository 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  {

    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 😍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.