Angular CLI custom webpack config

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.