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?

Wampler

Answer 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.

Wampler

I can't get this working in my project. It doesn't load the extra-webpack.config.js at all. I installed all dependencies following the instructions. Any tips how to debug? – Cracked

Please open an issue on github: github.com/meltedspark/angular-builders/issues. Specify your angular.json, your package.json and your extra-webpack.config.js. – Wampler

Posted an issue github.com/meltedspark/angular-builders/issues/19 – Cracked

I want to do this for test build, is it possible? Could you provide some instructions on this? All I need to do is attach a plugin. – Eelgrass

Test builder for custom webpack not yet exists. You can open a feature request here. You are also welcome to make a PR for this ;) How do you want to modify the test build? – Wampler

@meltedspark Thanks, I was looking for something like the Angular CLI Builder, your answer pointed me to the right direction. My original question is here if you have any input: #52897279 – Airport

Tried this but also having issues with cli 7.1.4. Schema validation failed with the following errors:Data path ".builders['browser']" should have required property 'class'. – Euphonize

I bet you've installed version 8 of the builders. You should use 7. – Wampler

It's a good solution, but unfortunately I can't find any example about extending existing Angular CLI config file. I mean - I have to see what Angular CLI already generates for me, before I can think of correct overrides I should use in my builder override config. So, where do I find Angular's default generated webpack settings? – Roving

@Roving github.com/angular/angular-cli/tree/master/packages/… – Wampler

@Wampler Just curious: how is @angular-builders/custom-webpack different from @angular-devkit/build-webpack? Are they both different solutions for the same problem, or do they solve two fundamentally different problems? Any comparisons between the two? – Mcgough

The latter. build-webpack just runs a webpack build (or webpack-dev-server) with a configuration you provide. No other functionality involved. Think of it as a way to run webpack build with Angular CLI. @angular-builders/custom-webpack on the other hand runs default Angular build chain while allowing to customize this build by providing a delta Webpack config that complements the default build configuration. – Wampler

@Wampler Hi, with the latest version of your library is it possible to specify a particular config in a webpack.config.js that exports multiple configurations or is another separate config file required? – Sphygmic

Answer 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.

Ravid