@angular-devkit/build-webpack

What is @angular-devkit/build-webpack?

The @angular-devkit/build-webpack package is a toolkit designed to work with Angular projects, providing utilities and features to enhance the build process of Angular applications using Webpack. It abstracts complex configurations and optimizations into more manageable and Angular-centric commands and configurations.

What are @angular-devkit/build-webpack's main functionalities?

Custom Webpack Configuration

Allows developers to extend or override the default Webpack configuration used by Angular CLI, enabling customizations and optimizations specific to their project's needs.

const { buildWebpackConfig } = require('@angular-devkit/build-webpack');
const customWebpackConfig = {
  // Custom Webpack configurations
};
const webpackConfig = buildWebpackConfig(defaultConfig, customWebpackConfig);

Webpack Dev Server Integration

Facilitates the integration of Webpack Dev Server with Angular projects, simplifying the process of serving applications locally for development with live reloading and other development-friendly features.

const { serveWebpackBrowser } = require('@angular-devkit/build-webpack');
serveWebpackBrowser({
  // Options for serving
});

Optimization Utilities

Provides utilities to optimize the Webpack configuration for production builds, including minification, tree shaking, and other performance enhancements.

const { optimizeWebpackConfig } = require('@angular-devkit/build-webpack');
const optimizedConfig = optimizeWebpackConfig(defaultConfig, {
  // Optimization options
});

Other packages similar to @angular-devkit/build-webpack

webpack

Webpack is the core technology behind @angular-devkit/build-webpack. It's a static module bundler for JavaScript applications. While @angular-devkit/build-webpack provides Angular-specific integrations and abstractions, Webpack itself is more generic and can be used with any JavaScript framework or library.

angular-cli

Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. It uses @angular-devkit/build-angular, which in turn relies on @angular-devkit/build-webpack for its Webpack integration. Angular CLI abstracts away much of the complexity of the build configuration, making it easier to use but less flexible than directly using Webpack or @angular-devkit/build-webpack.

create-react-app

Create React App is a similar tool to Angular CLI but for React applications. It abstracts the Webpack configuration for React projects, providing a simplified development experience. Unlike @angular-devkit/build-webpack, it's tailored specifically for React and doesn't offer the same level of Angular integration or customization.

README

Webpack Builder for Architect

This package allows you to run Webpack and Webpack Dev Server using Architect.

To use it on your Angular CLI app, follow these steps:

• run npm install @angular-devkit/build-webpack.
• create a webpack configuration.
• add the following targets inside angular.json.

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

• run ng run app:build-webpack to build, and ng run app:serve-webpack to serve.

All options, including watch and stats, are looked up inside the webpack configuration.