@angular-buildx/webpack NPM

`@angular-buildx/webpack`

@angular-buildx/webpack is a custom Angular CLI builder that allows you to use custom Webpack configurations for the build, development server, and Karma tests. This package extends the default Angular CLI builders for added flexibility in your project setups.

Installation

To install the package, use npm or yarn:

npm install --save-dev @angular-buildx/webpack
# or
yarn add --dev @angular-buildx/webpack
# or
pnpm add -D @angular-buildx/webpack

Usage

To use this custom builder in your Angular project, you need to update the angular.json file to point to the custom builders for different targets (browser, dev-server, karma).

1. Browser Target

For custom builds with Webpack, you can configure the browser build using the @angular-buildx/webpack:browser builder. You can specify a custom Webpack config file via the webpack option.

Example angular.json configuration:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-buildx/webpack:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": [],
            "webpack": "./webpack.config.js"
          }
        }
      }
    }
  }
}

2. Dev Server Target

For development servers with custom Webpack configurations, you can use the @angular-buildx/webpack:dev-server builder.

Example angular.json configuration:

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "builder": "@angular-buildx/webpack:dev-server",
          "options": {
            "browserTarget": "my-app:build",
            "webpack": "./webpack.config.js"
          }
        }
      }
    }
  }
}

3. Karma Target

For running Karma tests with custom Webpack configurations, you can configure the test builder to use the @angular-buildx/webpack:karma builder.

Example angular.json configuration:

{
  "projects": {
    "my-app": {
      "architect": {
        "test": {
          "builder": "@angular-buildx/webpack:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "tsConfig": "tsconfig.spec.json",
            "webpack": "./webpack.config.js"
          }
        }
      }
    }
  }
}

Webpack Configuration

In each of the configurations above, you can specify the path to a custom Webpack configuration file using the webpack option. Here's an example webpack.config.js file:

/**
 * @param {import('webpack').Configuration} config - The Webpack configuration object.
 * @param {import('@angular-devkit/architect').BuilderContext} context - The Angular builder context.
 */
module.exports = function (config, context) {
  // Modify the Webpack config as needed
  config.module.rules.push({
    test: /\.svg$/,
    use: "svg-url-loader",
  });

  // Optional for return except you change the config pointer variable with new custom your own webpack config
  return config;
};

Automatic Folder Extraction for Custom Webpack Files

If you include a custom Webpack file in your build process, this package will automatically extract and create the following folder structure:

.webpack/
├── webpack.original.snapshot
├── webpack.merged.snapshot

webpack.original.snapshot: Contains the original Webpack configuration before your custom changes.
webpack.merged.snapshot: Contains the final Webpack configuration after merging your custom configuration.