Webpack plugin that generates JSON manifest files mapping original filenames to their hashed versions with extensive customization options
—
This document covers the complete configuration options and initialization of the WebpackAssetsManifest plugin.
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;
};
}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)
}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>;
}import { WebpackAssetsManifest } from "webpack-assets-manifest";
const manifest = new WebpackAssetsManifest({
output: "manifest.json",
enabled: true,
writeToDisk: true,
});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()}`);
},
});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",
});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}`;
},
});The plugin uses schema-utils for configuration validation:
const optionsSchema: Schema;Invalid configurations will throw validation errors with detailed messages about the incorrect 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