@cyclonedx/webpack-plugin weekly downloads statistics

CycloneDX webpack plugin

[![shield_npm-version]][link_npm] [![shield_gh-workflow-test]][link_gh-workflow-test] [![shield_coverage]][link_codacy] [![shield_ossf-best-practices]][link_ossf-best-practices] [![shield_license]][license_file]
[![shield_website]][link_website] [![shield_slack]][link_slack] [![shield_groups]][link_discussion] [![shield_twitter-follow]][link_twitter]

---

This plugin for [webpack] creates a [CycloneDX] Software Bill of Materials (SBoM) containing an aggregate of all bundled dependencies.
This is probably the most accurate, complete SBOM generator for webpack-based builds.

This plugin uses the linkages generated by webpack to create a dependency graph which only contain the dependencies that are actually used (after tree-shaking).

The resulting SBOM documents follow official specifications and standards.

Requirements

• Node.js >= 20.18
• webpack ^5

However, there are older versions of this plugin, that support

• Node.js v8.0.0 or higher
• webpack v4.0.0 or higher

Installing

npm i -D @cyclonedx/webpack-plugin
yarn add -D @cyclonedx/webpack-plugin

Usage

new CycloneDxWebpackPlugin(options?: object)

Options & Configuration

<!-- the following table is based on `src/plugin.ts`::`CycloneDxWebpackPluginOptions` -->

Name	Type	Default	Description
specVersion	{string}<br/> one of: "1.2", "1.3", "1.4", "1.5", "1.6", "1.7"	"1.6"	Which version of [CycloneDX-spec] to use.<br/> Supported values depend on the installed dependency [CycloneDX-javascript-library].
reproducibleResults	{boolean}	false	Whether to go the extra mile and make the output reproducible.<br/> Reproducibility might result in loss of time- and random-based-values.
validateResults	{boolean}	true	Whether to validate the BOM result.<br/> Validation is skipped, if requirements not met. Requires transitive optional dependencies.
outputLocation	{string}	"./cyclonedx"	Path to write the output to. The path is relative to webpack's overall output path.
includeWellknown	{boolean}	true	Whether to write the Wellknowns.
wellknownLocation	{string}	"./.well-known"	Path to write the Wellknowns to. The path is relative to webpack's overall output path.
rootComponentAutodetect	{boolean}	true	Whether to try auto-detection of the RootComponent.<br/> Tries to find the nearest package.json and build a CycloneDX component from it, so it can be assigned to bom.metadata.component.
rootComponentType	{string}	"application"	Set the RootComponent's type.<br/> See the list of valid values. Supported values depend on [CycloneDX-javascript-library]'s enum ComponentType.
rootComponentName	optional {string}	undefined	If rootComponentAutodetect is disabled, then this value is assumed as the "name" of the package.json.
rootComponentVersion	optional {string}	undefined	If rootComponentAutodetect is disabled, then this value is assumed as the "version" of the package.json.
rootComponentVCS	optional {string}	undefined	If rootComponentAutodetect is disabled or the Version Control System is not declared in the package.json, then this value is used as the URL for [RootComponent's External References'][docs_cdx_metadata_component_externalReferences] of type "vcs".
rootComponentBuildSystem	optional {string}	undefined	Set the URL for [RootComponent's External References'][docs_cdx_metadata_component_externalReferences] of type "build-system".<br/> This behavior is regardless of rootComponentAutodetect's status.
collectEvidence	{boolean}	false	Whether to collect (license) evidence and attach them to the resulting SBOM.

Example

In your [webpack config] add the CycloneDX plugin:

const { CycloneDxWebpackPlugin } = require('@cyclonedx/webpack-plugin');

/** @type {import('@cyclonedx/webpack-plugin').CycloneDxWebpackPluginOptions} */
const cycloneDxWebpackPluginOptions = {
  specVersion: '1.7',
  outputLocation: './bom'
}

module.exports = {
  // ...
  plugins: [
    new CycloneDxWebpackPlugin(cycloneDxWebpackPluginOptions)
  ]
}

See extended [examples].

Support for IETF /.well-known/sbom

The CycloneDX webpack plugin supports placing the CycloneDX SBOM in a pre-defined location, specifically in /.well-known/sbom. This option is enabled by default. The behavior can be changed by overriding the values of includeWellknown and wellknownLocation.
See [draft-ietf-opsawg-sbom-access] for more information on the specification, currently an IETF draft.

In your [webpack config] add the CycloneDX plugin:

const { CycloneDxWebpackPlugin } = require('@cyclonedx/webpack-plugin');

/** @type {import('@cyclonedx/webpack-plugin').CycloneDxWebpackPluginOptions} */
const cycloneDxWebpackPluginOptions = {
  includeWellknown: true,
  wellknownLocation: './.well-known'
}

module.exports = {
  // ...
  plugins: [
    new CycloneDxWebpackPlugin(cycloneDxWebpackPluginOptions)
  ]
}

Use with Angular

Angular uses webpack under the hood. Therefore, it is possible to integrate this plugin by utilizing @angular-builders/custom-webpack.
See an example here: integration with Angular17/webpack5.

Use with React…