Angular CLI custom webpack config

Question

In previous versions of Angular there was an option for eject so that you could modify your webpack configuration as you please.
One of the most common use cases for this feature was adding custom webpack loaders.

In Angular 6 this option has been removed, so currently there is literally no way to get the webpack config (beside looking it up in angular source code).

Is there any way to add a custom webpack config to Angular application that uses @angular/cli 6+? Or alternatively, is there any way to "eject" the webpack config the new Angular CLI uses under the hood?

Answer 1

Disclaimer: I am the owner of the below library

You can use angular-builders library that allows you extending the existing browser and server targets 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)

Here you can find an example that adds node-loader to browser config.

Further reading:
Customizing Angular CLI build - an alternative to ng eject