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?

回答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

回答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.