webpack-assets-manifest weekly downloads statistics

Webpack Assets Manifest

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

Installation

pnpm add -D webpack-assets-manifest

npm install webpack-assets-manifest -D

yarn add webpack-assets-manifest -D

New in version 6

• This plugin is now written with TypeScript.
• TypeScript types are provided by this package.
• The package exports esm and cjs.
• Added manifest.utils for use in the customize hook.
  • See examples/customized.js
  • https://github.com/webdeveric/webpack-assets-manifest/blob/b6ed8c09394bf33c8fadd5adff8bad7694f295ba/src/plugin.ts#L185-L195

Breaking changes

• Bumped minimum webpack version to 5.61
• Bumped minimum Node version to 20.10
• The plugin is exported using a named export instead of default.
  • Use import { WebpackAssetsManifest } from 'webpack-assets-manifest';

New in version 5

• Compatible with webpack 5 only (5.1+ required).
• Supports finding asset modules.
• Updated options schema to prevent additional properties. This helps with catching typos in option names.
• :warning: Updated default value of the output option to be assets-manifest.json. This is to prevent confusion when working with Web app manifests or WebExtension manifests.

New in version 4

• Requires Node 10+.

• Compatible with webpack 4 only (4.40+ required).

• Added options: enabled, entrypointsUseAssets, contextRelativeKeys.

• Updated writeToDisk option to default to auto.

• Use lock files for various operations.

• done hook is now an AsyncSeriesHook.

• :warning: The structure of the entrypoints data has been updated to include preload and prefetch assets. Assets for an entrypoint are now included in an assets property under the entrypoint.

  Example:

  {
    "entrypoints": {
      "main": {
        "assets": {
          "css": ["main.css"],
          "js": ["main.js"]
        },
        "prefetch": {
          "js": ["prefetch.js"]
        },
        "preload": {
          "js": ["preload.js"]
        }
      }
    }
  }
  

Usage

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

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

export default {
  entry: {
    // Your entry points
  },
  output: {
    // Your output details
  },
  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)

enabled

Type: boolean

Default: true

Is the plugin enabled?

output

Type: string

Default: assets-manifest.json

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

assets

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,
});

contextRelativeKeys

Type: boolean

Default: false

Keys are relative to the compiler context.

space

Type: int

Default: 2

Number of spaces to use for pretty printing.

replacer

Type: null, function, or array

Default: null

Replacer reference

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

fileExtRegex

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.

writeToDisk

Type: boolean, string

Default: 'auto'

Write the manifest to disk using fs.

: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.

sortManifest

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.…