or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

asset-management.mdhooks.mdindex.mdplugin-configuration.mdutilities.md
tile.json

tessl/npm-webpack-assets-manifest

Webpack plugin that generates JSON manifest files mapping original filenames to their hashed versions with extensive customization options

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/webpack-assets-manifest@6.2.x

To install, run

npx @tessl/cli install tessl/npm-webpack-assets-manifest@6.2.0

index.mddocs/

Webpack Assets Manifest

Webpack Assets Manifest is a Webpack plugin that generates JSON manifest files mapping original asset filenames to their hashed versions. It provides extensive customization options through hooks, supports entrypoint tracking with preload/prefetch assets, includes subresource integrity hash generation, and offers both ESM and CommonJS exports with full TypeScript support.

Package Information

  • Package Name: webpack-assets-manifest
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install webpack-assets-manifest -D

Core Imports

import { WebpackAssetsManifest } from "webpack-assets-manifest";

For CommonJS:

const { WebpackAssetsManifest } = require("webpack-assets-manifest");

Type imports:

import type { Options, AssetsStorage, KeyValuePair, UnknownRecord, JsonStringifyReplacer, JsonStringifySpace } from "webpack-assets-manifest";

Subpath imports:

import { getSRIHash } from "webpack-assets-manifest/helpers";
import { isObject, isKeyValuePair, isPropertyKey } from "webpack-assets-manifest/type-predicate";
import { optionsSchema } from "webpack-assets-manifest/options-schema";
import type { AssetsStorage, KeyValuePair } from "webpack-assets-manifest/types";

Basic Usage

import { WebpackAssetsManifest } from "webpack-assets-manifest";

// In your webpack configuration
export default {
  plugins: [
    new WebpackAssetsManifest({
      output: "assets-manifest.json",
      enabled: true,
      writeToDisk: true,
      sortManifest: true,
    }),
  ],
};

Architecture

The plugin consists of several key components:

  • WebpackAssetsManifest Class: Main plugin implementing WebpackPluginInstance
  • Hook System: Tapable-based hooks for customization (apply, customize, transform, done)
  • Asset Processing: Handles webpack asset analysis and manifest generation
  • Type System: Complete TypeScript definitions for all APIs

Capabilities

Plugin Configuration

Core plugin configuration and initialization with comprehensive options for manifest generation, asset processing, and output customization.

class WebpackAssetsManifest {
  constructor(options?: Partial<Options>);
  apply(compiler: Compiler): void;
  
  // Getter properties
  get defaultOptions(): Options;
  get isMerging(): boolean;
  get utils(): {
    isKeyValuePair: typeof isKeyValuePair;
    isObject: typeof isObject;
    getSRIHash: typeof getSRIHash;
  };
}

interface Options {
  enabled: boolean;
  assets: AssetsStorage;
  output: string;
  replacer: JsonStringifyReplacer;
  space: JsonStringifySpace;
  writeToDisk: boolean | 'auto';
  fileExtRegex: RegExp | false;
  sortManifest: boolean | ((left: string, right: string) => number);
  merge: boolean | 'customize';
  publicPath?: string | boolean | ((filename: string, manifest: WebpackAssetsManifest) => string);
  contextRelativeKeys: boolean;
  entrypoints: boolean;
  entrypointsKey: string | false;
  entrypointsUseAssets: boolean;
  integrity: boolean;
  integrityHashes: string[];
  integrityPropertyName: string;
  extra: Record<PropertyKey, unknown>;
  apply?: (manifest: WebpackAssetsManifest) => void;
  customize?: (entry: KeyValuePair | false | undefined | void, original: KeyValuePair, manifest: WebpackAssetsManifest, asset?: Asset) => KeyValuePair | false | undefined | void;
  done?: (manifest: WebpackAssetsManifest, stats: Stats) => Promise<void>;
  transform?: (assets: AssetsStorage, manifest: WebpackAssetsManifest) => AssetsStorage;
}

Plugin Configuration

Asset Management

Programmatic interface for managing manifest entries with methods for adding, retrieving, updating, and deleting asset mappings.

class WebpackAssetsManifest {
  set(key: AssetsStorageKey, value: AssetsStorageValue): this;
  setRaw(key: AssetsStorageKey, value: AssetsStorageValue): this;
  get(key: AssetsStorageKey, defaultValue?: AssetsStorageValue): AssetsStorageValue | undefined;
  has(key: AssetsStorageKey): boolean;
  delete(key: AssetsStorageKey): boolean;
  clear(): void;
}

Asset Management

Hook System

Tapable-based hook system for customizing manifest generation at various stages of the webpack compilation process.

interface WebpackAssetsManifest {
  hooks: {
    apply: SyncHook<[manifest: WebpackAssetsManifest]>;
    customize: SyncWaterfallHook<[entry: KeyValuePair | false | undefined | void, original: KeyValuePair, manifest: WebpackAssetsManifest, asset: Asset | undefined]>;
    transform: SyncWaterfallHook<[asset: AssetsStorage, manifest: WebpackAssetsManifest]>;
    done: AsyncSeriesHook<[manifest: WebpackAssetsManifest, stats: Stats]>;
    options: SyncWaterfallHook<[options: Options]>;
    afterOptions: SyncHook<[options: Options, manifest: WebpackAssetsManifest]>;
  };
}

Hook System

Utility Functions

Helper functions for type checking, SRI hash generation, and data processing available both as standalone imports and through the plugin's utils property.

function getSRIHash(algorithm: string, content: string | BinaryLike): string;
function isObject<T extends object = UnknownRecord>(input: unknown): input is T;
function isKeyValuePair(input: unknown): input is KeyValuePair;
function isPropertyKey(input: unknown): input is PropertyKey;

Utility Functions

Types

type AssetsStorage = Record<string | number, any>;
type AssetsStorageKey = keyof AssetsStorage;
type AssetsStorageValue = AssetsStorage[AssetsStorageKey];

type KeyValuePair<K extends AssetsStorageKey = AssetsStorageKey, V extends AssetsStorageValue = AssetsStorageValue> =
  | { key: K; value: V; }
  | { key: K; value?: V; }
  | { key?: K; value: V; };

type JsonStringifyReplacer = ((this: any, key: string, value: any) => any) | (string | number)[] | null | undefined;
type JsonStringifySpace = Parameters<JSON['stringify']>[2];

type UnknownRecord = Record<PropertyKey, unknown>;