Angular CLI custom webpack config

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.