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?

N.K · Accepted Answer · 2022-06-09 17:59:32Z

81

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:

Install the library: npm i -D @angular-builders/custom-webpack

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"
              ...
       }

Add extra-webpack.config.js to the root of your application
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.

edited Jun 9, 2022 at 17:59

N.K

2,2401 gold badge15 silver badges45 bronze badges

answered Jul 2, 2018 at 7:11

JeB

12.3k11 gold badges63 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Timo Over a year ago

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?

JeB Over a year ago

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.

Timo Over a year ago

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

JeB Over a year ago

@JustAMartin github.com/angular/angular-cli/tree/master/packages/…

JeB Over a year ago

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.

|

Daniel Danielecki · Accepted Answer · 2019-07-26 11:04:52Z

9

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.

answered Jul 26, 2019 at 11:04

Daniel Danielecki

10.9k7 gold badges89 silver badges111 bronze badges

Collectives™ on Stack Overflow

Angular CLI custom webpack config

2 Answers 2

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related