CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-webpack-assets-manifest

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

Pending
Overview
Eval results
Files

plugin-configuration.mddocs/

Plugin Configuration

This document covers the complete configuration options and initialization of the WebpackAssetsManifest plugin.

Plugin Class

class WebpackAssetsManifest implements WebpackPluginInstance {
  constructor(options?: Partial<Options>);
  apply(compiler: Compiler): void;
  
  // Public properties
  options: Options;
  assets: AssetsStorage;
  assetNames: Map<string, string>;
  compiler?: Compiler;
  hooks: HookSystem;
  
  // Getter properties
  get defaultOptions(): Options;
  get isMerging(): boolean;
  get utils(): {
    isKeyValuePair: typeof isKeyValuePair;
    isObject: typeof isObject;
    getSRIHash: typeof getSRIHash;
  };
}

Configuration Options

Core Options

interface Options {
  // Plugin state
  enabled: boolean; // Default: true
  
  // Asset storage
  assets: AssetsStorage; // Default: Object.create(null)
  
  // Output settings
  output: string; // Default: 'assets-manifest.json'
  writeToDisk: boolean | 'auto'; // Default: 'auto'
  
  // JSON formatting
  replacer: JsonStringifyReplacer; // Default: null
  space: JsonStringifySpace; // Default: 2
  
  // Asset processing
  fileExtRegex: RegExp | false; // Default: /\.\w{2,4}\.(?:map|gz|br)$|\.\w+$/i
  contextRelativeKeys: boolean; // Default: false
  
  // Manifest behavior
  sortManifest: boolean | ((left: string, right: string) => number); // Default: true
  merge: boolean | 'customize'; // Default: false
  
  // Public path configuration
  publicPath?: string | boolean | ((filename: string, manifest: WebpackAssetsManifest) => string);
  
  // Entrypoints
  entrypoints: boolean; // Default: false
  entrypointsKey: string | false; // Default: 'entrypoints'
  entrypointsUseAssets: boolean; // Default: false
  
  // Subresource Integrity
  integrity: boolean; // Default: false
  integrityHashes: string[]; // Default: ['sha256', 'sha384', 'sha512']
  integrityPropertyName: string; // Default: 'integrity'
  
  // Extensions
  extra: Record<PropertyKey, unknown>; // Default: Object.create(null)
}

Hook Options

interface Options {
  // Hook callbacks
  apply?: (manifest: WebpackAssetsManifest) => void;
  customize?: (
    entry: KeyValuePair | false | undefined | void,
    original: KeyValuePair,
    manifest: WebpackAssetsManifest,
    asset?: Asset
  ) => KeyValuePair | false | undefined | void;
  transform?: (assets: AssetsStorage, manifest: WebpackAssetsManifest) => AssetsStorage;
  done?: (manifest: WebpackAssetsManifest, stats: Stats) => Promise<void>;
}

Usage Examples

Basic Configuration

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

const manifest = new WebpackAssetsManifest({
  output: "manifest.json",
  enabled: true,
  writeToDisk: true,
});

Advanced Configuration

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

const manifest = new WebpackAssetsManifest({
  output: "assets/manifest.json",
  publicPath: "https://cdn.example.com/",
  sortManifest: true,
  merge: "customize",
  entrypoints: true,
  integrity: true,
  integrityHashes: ["sha256", "sha384"],
  customize(entry, original, manifest, asset) {
    // Custom entry processing
    if (entry && entry.key.startsWith("img/")) {
      return {
        key: entry.key.replace("img/", "images/"),
        value: entry.value,
      };
    }
    return entry;
  },
  transform(assets, manifest) {
    // Custom asset transformation
    return assets;
  },
  done: async (manifest, stats) => {
    console.log(`Manifest written to ${manifest.getOutputPath()}`);
  },
});

Multi-Compiler Configuration

const sharedAssets = Object.create(null);

const manifest1 = new WebpackAssetsManifest({
  assets: sharedAssets,
  output: "client-manifest.json",
});

const manifest2 = new WebpackAssetsManifest({
  assets: sharedAssets,
  output: "server-manifest.json",
});

Dynamic Public Path

const manifest = new WebpackAssetsManifest({
  publicPath(filename, manifest) {
    // Environment-specific CDN URLs
    const env = process.env.NODE_ENV;
    const cdnUrl = env === "production" ? "https://cdn.prod.com" : "https://cdn.dev.com";
    return `${cdnUrl}/${filename}`;
  },
});

Configuration Validation

The plugin uses schema-utils for configuration validation:

const optionsSchema: Schema;

Invalid configurations will throw validation errors with detailed messages about the incorrect options.

Default Options

class WebpackAssetsManifest {
  get defaultOptions(): Options;
}

All default values are accessible through the defaultOptions getter, allowing for inspection and extension of the base configuration.

Install with Tessl CLI

npx tessl i tessl/npm-webpack-assets-manifest

docs

asset-management.md

hooks.md

index.md

plugin-configuration.md

utilities.md

tile.json