How would you extract webpack c...

To extract the webpack configuration from an Angular CLI project, you can follow a few different approaches depending on the version of Angular CLI you are using and whether you want to modify the configuration or simply access it for review.

For Angular CLI versions 6 and above, direct extraction of the webpack configuration is not as straightforward as it was in earlier versions because the ng eject command has been removed. However, you can still access the webpack configuration indirectly or extend it using custom builders.

Here are the methods to extract or access the webpack configuration from an Angular CLI project:

Using Custom Builders

1. Install Custom Builders: You can use @angular-builders/custom-webpack which allows you to customize the webpack configuration without ejecting it. First, install the custom builders as a dev dependency:

   npm install --save-dev @angular-builders/custom-webpack

   This package provides a way to customize the webpack configuration used by Angular CLI.

2. Modify angular.json: After installing the custom builders, you need to modify your angular.json file to use the custom webpack builder for the build and serve targets:

   "architect": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./extra-webpack.config.js"
         }
       }
     },
     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       // ... other options
     }
   }

   This tells Angular CLI to use your custom webpack configuration when building or serving the application[5].

3. Create Custom Webpack Config File: Create a file named extra-webpack.config.js in your project root and export your custom webpack configuration from this file. This file should contain only the modifications or additions to the base webpack configuration provided by Angular CLI[5].

Accessing Webpack Configuration for Review

1. Extracting Configuration Programmatically: If you simply want to review the webpack configuration, you can use a script to extract and log the configuration. This approach involves reading the angular.json file, creating a webpack configuration object, and then logging it. An example of such a script can be found in the GitHub repository by Quramy:

   const fs = require('fs');
   const path = require('path');
   const angularJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'angular.json'), 'utf8'));
   const project = angularJson['projects'][angularJson['defaultProject']];
   // ... rest of the script to create webpackConfigOptions
   const { getCommonConfig } = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
   const webpackCommonConfig = getCommonConfig(webpackConfigOptions);

...