@angular-builders/custom-webpack

What is @angular-builders/custom-webpack?

@angular-builders/custom-webpack is an npm package that allows you to customize the Webpack configuration in Angular projects. It provides a way to extend or override the default Angular build process with custom Webpack configurations.

What are @angular-builders/custom-webpack's main functionalities?

Custom Webpack Configuration

This feature allows you to specify a custom Webpack configuration file (extra-webpack.config.js) that extends or overrides the default Angular build configuration. The custom configuration can be applied to both build and serve commands.

{"angular.json":{"projects":{"your-project-name":{"architect":{"build":{"builder":"@angular-builders/custom-webpack:browser","options":{"customWebpackConfig":{"path":"./extra-webpack.config.js"}}},"serve":{"builder":"@angular-builders/custom-webpack:dev-server","options":{"customWebpackConfig":{"path":"./extra-webpack.config.js"}}}}}}},"extra-webpack.config.js":{"module":{"rules":[{"test":"\\.js$","exclude":"/node_modules/","use":{"loader":"babel-loader","options":{"presets":["@babel/preset-env"]}}}]}}}

Merge Strategies

This feature allows you to define merge strategies for the custom Webpack configuration. In this example, the 'module.rules' array from the custom configuration is prepended to the default configuration.

{"extra-webpack.config.js":{"module":{"rules":[{"test":"\\.js$","exclude":"/node_modules/","use":{"loader":"babel-loader","options":{"presets":["@babel/preset-env"]}}}]}},"angular.json":{"projects":{"your-project-name":{"architect":{"build":{"builder":"@angular-builders/custom-webpack:browser","options":{"customWebpackConfig":{"path":"./extra-webpack.config.js","mergeStrategies":{"module.rules":"prepend"}}}}}}}}}

Custom Webpack Configuration for Different Environments

This feature allows you to specify different custom Webpack configurations for different environments (e.g., production and development). Each environment can have its own configuration file.

{"angular.json":{"projects":{"your-project-name":{"architect":{"build":{"builder":"@angular-builders/custom-webpack:browser","configurations":{"production":{"customWebpackConfig":{"path":"./webpack.prod.config.js"}},"development":{"customWebpackConfig":{"path":"./webpack.dev.config.js"}}}}}}}},"webpack.prod.config.js":{"mode":"production","optimization":{"minimize":true}},"webpack.dev.config.js":{"mode":"development","devtool":"source-map"}}

Other packages similar to @angular-builders/custom-webpack

ngx-build-plus

ngx-build-plus is another package that allows you to extend the Angular CLI's build process with custom Webpack configurations. It provides similar functionality to @angular-builders/custom-webpack, including the ability to merge custom configurations and support for different environments.

angular-cli-customizer

angular-cli-customizer is a package that enables customization of the Angular CLI build process. It allows you to modify the Webpack configuration and provides hooks for various stages of the build process. It is similar to @angular-builders/custom-webpack but offers a different approach to customization.

README

custom-webpack

Custom webpack builders for Angular build facade.
Allow customizing build configuration without ejecting webpack configuration (ng eject)

Prerequisites:

• Angular CLI 6
• @angular-devkit/architect >= 0.7.0
• @angular-devkit/build-angular >= 0.7.0
• @angular-devkit/core >= 0.7.0

Usage

1. npm i -D @angular-builders/custom-webpack
2. In your angular.json:

   "projects": {
       ...
       "[project]": {
            ...
            "architect": {
                   ...
                   "[architect-target]": {
                             "builder": "@angular-builders/custom-webpack:[browser|server]"
                             "options": {
                                   ...
                             }
   

   Where:
   • [project] is the name of the project to which you want to add the builder
   • [architect-target] is the name of build target you want to run (build, serve, test etc. or any custom target)
   • [browser|server] one of the supported builders - browser or server
3. If [architect-target] is not one of the predefined targets (like build, serve etc.) then run it like this:
   ng run [project]:[architect-target]
   If it is one of the predefined targets, you can run it by ng [architect-target]

For example

• angular.json:

  "projects": {
      ...
      "example-app": {
           ...
           "architect": {
                  ...
                  "build": {
                            "builder": "@angular-builders/custom-webpack:browser"
                            "options": {
                                  ...
                            }
  

• Run the build: ng build

Builders

• @angular-builders/custom-webpack:browser
• @angular-builders/custom-webpack:server

Custom webpack browser

Extended @angular-devkit/build-angular:browser builder that allows to specify additional webpack configuration (on top of the existing under the hood). The builder will run the same build as @angular-devkit/build-angular:browser does with extra parameters that are specified in the provided webpack configuration.

Options:

• All the @angular-devkit/build-angular:browser options
• customWebpackConfig: configuration object with the following properties:
  • path: path to the extra webpack configuration, defaults to webpack.config.js
  • mergeStrategies: webpack config merge strategies, can be append | prepend | replace per webpack config entry. Defaults to append.
    • append: appends the given entry configuration (in custom webpack config) to the existing Angular CLI webpack configuration.
    • prepend: prepends the given entry configuration (in custom webpack config) to the existing field configuration (in Angular CLI webpack config). The custom loaders config will be added to the beginning of the existing loaders array.
    • replace: replaces the given entry configuration entirely. The custom webpack config will replace the Angular CLI webpack config (for this particular entry). See webpack-merge for more info.
  • replaceDuplicatePlugins: Defaults to false. If true, the plugins in custom webpack config will replace the corresponding plugins in default Angular CLI webpack configuration.

angular.json Example:

"architect": {
    ...
    "build": {
              "builder": "@angular-builders/custom-webpack:browser"
              "options": {
                     "customWebpackConfig": {
                        path: "./extra-webpack.config.js",
                        mergeStrategies: { "externals": "prepend" },
                     }
                     "outputPath": "dist/my-cool-client",
                     "index": "src/index.html",
                     "main": "src/main.ts",
                     "polyfills": "src/polyfills.ts",
                     "tsConfig": "src/tsconfig.app.json"
              }

In this example externals entry from extra-webpack.config.js will be prepended to externals entry from Angular CLI underlying webpack config.

Custom webpack server

Extended @angular-devkit/build-angular:server builder that allows to specify additional webpack configuration (on top of the existing under the hood). The builder will run the same build as @angular-devkit/build-angular:server does with extra parameters that are specified in the provided webpack configuration.

Options:

• All the @angular-devkit/build-angular:server options
• customWebpackConfig: configuration object with the following properties:
  • path: path to the extra webpack configuration, defaults to webpack.config.js
  • mergeStrategies: webpack config merge strategies, can be append | prepend | replace per webpack config entry. Defaults to append.
    • append: appends the given entry configuration (in custom webpack config) to the existing Angular CLI webpack configuration.
    • prepend: prepends the given entry configuration (in custom webpack config) to the existing field configuration (in Angular CLI webpack config). The custom loaders config will be added to the beginning of the existing loaders array.
    • replace: replaces the given entry configuration entirely. The custom webpack config will replace the Angular CLI webpack config (for this particular entry). See webpack-merge for more info.
  • replaceDuplicatePlugins: Defaults to false. If true, the plugins in custom webpack config will replace the corresponding plugins in default Angular CLI webpack configuration.

angular.json Example:

"architect": {
    ...
    "build": {
              "builder": "@angular-builders/custom-webpack:server"
              "options": {
                     "customWebpackConfig": {
                        path: "./extra-webpack.config.js",
                        mergeStrategies: { "loaders": "replace" },
                        replaceDuplicatePlugins: true
                     }
                    "outputPath": "dist/my-cool-server",
                    "main": "src/main.server.ts",
                    "tsConfig": "src/tsconfig.server.json"
              }

In this example loaders entry from Angular CLI webpack config will be replaced with loaders entry from extra-webpack.config.js. The plugins from extra-webpack.config.js will override the corresponding plugins from Angular CLI webpack config.

Further reading

• Customizing Angular CLI 6 build  -  an alternative to ng eject