Solution 1:

You can use angular-builders library that allows you extending the existing browser and server targets (and more than that) with a custom webpack config.

The usage is pretty simple:

  1. Install the library: npm i -D @angular-builders/custom-webpack

  2. Modify your 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. Add extra-webpack.config.js to the root of your application

  4. Put the extra configuration inside extra-webpack.config.js (just a plain webpack configuration)

  • Quick guide
  • Full documentation
  • An example that adds node-loader to browser config.

Solution 2:

For Angular 8 @angular-builders/dev-server:generic has been deprecated and @angular-builders/custom-webpack:dev-server is being used instead, source: https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD.

On top of this you might need to run npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest if after migrating you would have seen the following error architect_1.createBuilder is not a function.