This Webpack plugin will generate a JSON file that matches the original filename with the hashed version.

Usage no npm install needed!

<script type="module">
  import sharkcoreWebpackAssetsManifest from 'https://cdn.skypack.dev/@sharkcore/webpack-assets-manifest';


This is a fork of webdeveric/webpack-assets-manifest, with #53 and #73 merged.

Webpack Assets Manifest

Build Status codecov dependencies Status devDependencies Status

This Webpack plugin will generate a JSON file that matches the original filename with the hashed version.


:warning: Starting with version 2, this plugin works with Webpack 4+. Version 3.1 requires Webpack 4.4+.

npm install webpack-assets-manifest --save-dev

If you're using Webpack 3 or below, you'll need to install version 1.

npm install webpack-assets-manifest@1 --save-dev

New in version 3


In your webpack config, require the plugin then add an instance to the plugins array.

const path = require('path');
const WebpackAssetsManifest = require('webpack-assets-manifest');

module.exports = {
  entry: {
    // Your entry points
  output: {
    path: path.join( __dirname, 'dist' ),
    filename: '[name]-[hash].js',
    chunkFilename: '[id]-[chunkhash].js',
  module: {
    // Your loader rules go here.
  plugins: [
    new WebpackAssetsManifest({
      // Options go here

Sample output

  "main.js": "main-9c68d5e8de1b810a80e4.js",
  "main.css": "main-9c68d5e8de1b810a80e4.css",
  "images/logo.svg": "images/logo-b111da4f34cefce092b965ebc1078ee3.svg"

Options (read the schema)


Type: string

Default: manifest.json

This is where to save the manifest file relative to your webpack output.path.


Type: object

Default: {}

Data is stored in this object.

Sharing data

You can share data between instances by passing in your own object in the assets option.

This is useful in multi-compiler mode.

const data = Object.create(null);

const manifest1 = new WebpackAssetsManifest({
  assets: data,

const manifest2 = new WebpackAssetsManifest({
  assets: data,


Type: int

Default: 2

Number of spaces to use for pretty printing.


Type: null, function, or array

Default: null

Replacer reference

You'll probably want to use the transform hook instead.


Type: regex

Default: /\.\w{2,4}\.(?:map|gz)$|\.\w+$/i

This is the regular expression used to find file extensions. You'll probably never need to change this.


Type: boolean

Default: false

Write the manifest to disk using fs during afterEmit.

:warning: If you're using another language for your site and you're using webpack-dev-server to process your assets during development, you should set writeToDisk: true and provide an absolute path in output so the manifest file is actually written to disk and not kept only in memory.


Type: boolean, function

Default: true

The manifest is sorted alphabetically by default. You can turn off sorting by setting sortManifest: false.

If you want more control over how the manifest is sorted, you can provide your own comparison function. See the sorted example.

new WebpackAssetsManifest({
  sortManifest(a, b) {
    // Return -1, 0, or 1


Type: boolean, string

Default: false

If the output file already exists and you'd like to add to it, use merge: true. The default behavior is to use the existing keys/values without modification.

new WebpackAssetsManifest({
  output: '/path/to/manifest.json',
  merge: true

If you need to customize during merge, use merge: 'customize'.

If you want to know if customize was called when merging with an existing manifest, you can check manifest.isMerging.

new WebpackAssetsManifest({
  merge: 'customize',
  customize(entry, original, manifest, asset) {
    if ( manifest.isMerging ) {
      // Do something


Type: string, function, boolean,

Default: null

When using publicPath: true, your webpack config output.publicPath will be used as the value prefix.

const manifest = new WebpackAssetsManifest({
  publicPath: true,

When using a string, it will be the value prefix. One common use is to prefix your CDN URL.

const manifest = new WebpackAssetsManifest({
  publicPath: '//cdn.example.com',

If you'd like to have more control, use a function. See the custom CDN example.

const manifest = new WebpackAssetsManifest({
  publicPath(filename, manifest)
    // customize filename here
    return filename;


Type: boolean

Default: false

Whether to automatically prefix manifest keys with [path] if not already present. This is useful if you want to preserve the physical location in the key, but use a different structure for the real assets.

For example, this would allow you to use a loader output filename such as [name].[hash].[ext], which would produce the following example manifest.json with this option enabled:

  "img/my/animation.gif": "animation.9e64d33f308cb1c2d85baba9fabb2019.gif"

With usePathBasedKeys set to false, the included img/my prefix would be stripped from the key.


Type: boolean

Default: false

Include compilation.entrypoints in the manifest file.


Type: string, boolean

Default: entrypoints

If this is set to false, the entrypoints will be added to the root of the manifest.


Type: boolean

Default: false

Include the subresource integrity hash.


Type: array

Default: [ 'sha256', 'sha384', 'sha512' ]

Hash algorithms to use when generating SRI. For browsers, the currently the allowed integrity hashes are sha256, sha384, and sha512.

Other hash algorithms can be used if your target environment is not a browser. If you were to create a tool to audit your S3 buckets for data integrity, you could use something like this example to record the md5 hashes.


Type: string

Default: integrity

This is the property that will be set on each entry in compilation.assets, which will then be available during customize. It is customizable so that you can have multiple instances of this plugin and not have them overwrite the currentAsset.integrity property.

You'll probably only need to change this if you're using multiple instances of this plugin to create different manifests.


Type: function

Default: null

Callback to run after setup is complete.


Type: function

Default: null

Callback to customize each entry in the manifest.


Type: function

Default: null

Callback to transform the entire manifest.


Type: function

Default: null

Callback to run after the compilation is done and the manifest has been written.


This plugin is using hooks from Tapable.

The apply, customize, transform, and done options are automatically tapped into the appropriate hook.

Name Type Callback signature
apply SyncHook function(manifest){}
customize SyncWaterfallHook function(entry, original, manifest, asset){}
transform SyncWaterfallHook function(assets, manifest){}
done SyncHook function(manifest, stats){}
options SyncWaterfallHook function(options){}
afterOptions SyncHook function(options){}

Tapping into hooks

Tap into a hook by calling the tap method on the hook as shown below.

If you want more control over exactly what gets added to your manifest, then use the customize and transform hooks. See the customized and transformed examples.

const manifest = new WebpackAssetsManifest();

manifest.hooks.apply.tap('YourPluginName', function(manifest) {
  // Do something here
  manifest.set('some-key', 'some-value');

manifest.hooks.customize.tap('YourPluginName', function(entry, original, manifest, asset) {
  // customize entry here
  return entry;

manifest.hooks.transform.tap('YourPluginName', function(assets, manifest) {
  // customize assets here
  return assets;

manifest.hooks.options.tap('YourPluginName', function(options) {
  // customize options here
  return options;

manifest.hooks.done.tap('YourPluginName', function(manifest, stats) {
  console.log(`The manifest has been written to ${manifest.getOutputPath()}`);

These hooks can also be set by passing them in the constructor options.

new WebpackAssetsManifest({
  done(manifest, stats) {
    console.log(`The manifest has been written to ${manifest.getOutputPath()}`);

If the manifest instance is passed to a hook, you can use has(key), get(key), set(key, value), setRaw(key, value),and delete(key) methods to manage what goes into the manifest.