angularwebpackangular-cliwebpack-loader

Angular CLI custom webpack config

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?

Solution

  • 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)