tessl/npm-webpack-assets-manifest

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Webpack Assets Manifest

Name: tessl/npm-webpack-assets-manifest
Author: tessl

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>;

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/webpack-assets-manifest@6.2.x
Publish Source: CLI
Badge