{"id":15511576,"url":"https://github.com/webdeveric/webpack-assets-manifest","last_synced_at":"2025-05-14T10:06:59.353Z","repository":{"id":4325240,"uuid":"52750309","full_name":"webdeveric/webpack-assets-manifest","owner":"webdeveric","description":"This webpack plugin will generate a JSON file that matches the original filename with the hashed version.","archived":false,"fork":false,"pushed_at":"2025-04-01T22:52:51.000Z","size":1824,"stargazers_count":325,"open_issues_count":1,"forks_count":34,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-03T19:09:52.822Z","etag":null,"topics":["json","manifest","sri","subresource-integrity","webpack","webpack-assets-manifest","webpack-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/webpack-assets-manifest","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webdeveric.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["webdeveric"],"tidelift":"npm/webpack-assets-manifest"}},"created_at":"2016-02-28T23:28:20.000Z","updated_at":"2025-04-01T17:19:06.000Z","dependencies_parsed_at":"2024-03-12T15:50:26.345Z","dependency_job_id":"686f4cd4-dc23-4067-b0f6-44a8a5e41b32","html_url":"https://github.com/webdeveric/webpack-assets-manifest","commit_stats":{"total_commits":189,"total_committers":11,"mean_commits":"17.181818181818183","dds":"0.40740740740740744","last_synced_commit":"c5915dcd82fd8faf47b09a9f938370e7a8b1d5c0"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdeveric%2Fwebpack-assets-manifest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdeveric%2Fwebpack-assets-manifest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdeveric%2Fwebpack-assets-manifest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdeveric%2Fwebpack-assets-manifest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdeveric","download_url":"https://codeload.github.com/webdeveric/webpack-assets-manifest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248335566,"owners_count":21086620,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["json","manifest","sri","subresource-integrity","webpack","webpack-assets-manifest","webpack-plugin"],"created_at":"2024-10-02T09:53:07.524Z","updated_at":"2025-04-11T03:32:54.888Z","avatar_url":"https://github.com/webdeveric.png","language":"TypeScript","funding_links":["https://github.com/sponsors/webdeveric","https://tidelift.com/funding/github/npm/webpack-assets-manifest"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Webpack Assets Manifest\n\n[![Node.js CI](https://github.com/webdeveric/webpack-assets-manifest/actions/workflows/node.js.yml/badge.svg)](https://github.com/webdeveric/webpack-assets-manifest/actions/workflows/node.js.yml) [![codecov](https://codecov.io/gh/webdeveric/webpack-assets-manifest/branch/master/graph/badge.svg)](https://codecov.io/gh/webdeveric/webpack-assets-manifest)\n\nThis webpack plugin will generate a JSON file that matches the original filename with the hashed version.\n\n## Installation\n\n```shell\npnpm add -D webpack-assets-manifest\n```\n\n```shell\nnpm install webpack-assets-manifest -D\n```\n\n```shell\nyarn add webpack-assets-manifest -D\n```\n\n## New in version 6\n\n- This plugin is now written with TypeScript.\n- TypeScript types are provided by this package.\n- The package exports `esm` and `cjs`.\n- Added `manifest.utils` for use in the `customize` hook.\n  - See [examples/customized.js](https://github.com/webdeveric/webpack-assets-manifest/blob/master/examples/customized.js)\n  - https://github.com/webdeveric/webpack-assets-manifest/blob/b6ed8c09394bf33c8fadd5adff8bad7694f295ba/src/plugin.ts#L185-L195\n\n### Breaking changes\n\n- Bumped minimum webpack version to `5.61`\n- Bumped minimum Node version to `20.10`\n- The plugin is exported using a named export instead of default.\n  - Use `import { WebpackAssetsManifest } from 'webpack-assets-manifest';`\n\n## New in version 5\n\n- Compatible with webpack 5 only (5.1+ required).\n- Supports finding [asset modules](https://webpack.js.org/guides/asset-modules/).\n- Updated options schema to prevent additional properties. This helps with catching typos in option names.\n- :warning: Updated default value of the `output` option to be `assets-manifest.json`. This is to prevent confusion when working with [Web app manifests](https://developer.mozilla.org/en-US/docs/Web/Manifest) or [WebExtension manifests](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json).\n\n## New in version 4\n\n- Requires Node 10+.\n- Compatible with webpack 4 only (4.40+ required).\n- Added options: [`enabled`](#enabled), [`entrypointsUseAssets`](#entrypointsUseAssets), [`contextRelativeKeys`](#contextRelativeKeys).\n- Updated [`writeToDisk`](#writeToDisk) option to default to `auto`.\n- Use lock files for various operations.\n- `done` hook is now an `AsyncSeriesHook`.\n- :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.\n\n  Example:\n\n  ```json\n  {\n    \"entrypoints\": {\n      \"main\": {\n        \"assets\": {\n          \"css\": [\"main.css\"],\n          \"js\": [\"main.js\"]\n        },\n        \"prefetch\": {\n          \"js\": [\"prefetch.js\"]\n        },\n        \"preload\": {\n          \"js\": [\"preload.js\"]\n        }\n      }\n    }\n  }\n  ```\n\n## Usage\n\nIn your webpack config, require the plugin then add an instance to the `plugins` array.\n\n```js\nimport { WebpackAssetsManifest } from 'webpack-assets-manifest';\n\nexport default {\n  entry: {\n    // Your entry points\n  },\n  output: {\n    // Your output details\n  },\n  module: {\n    // Your loader rules go here.\n  },\n  plugins: [\n    new WebpackAssetsManifest({\n      // Options go here\n    }),\n  ],\n};\n```\n\n## Sample output\n\n```json\n{\n  \"main.js\": \"main-9c68d5e8de1b810a80e4.js\",\n  \"main.css\": \"main-9c68d5e8de1b810a80e4.css\",\n  \"images/logo.svg\": \"images/logo-b111da4f34cefce092b965ebc1078ee3.svg\"\n}\n```\n\n---\n\n## Options ([read the schema](src/options-schema.ts))\n\n### `enabled`\n\nType: `boolean`\n\nDefault: `true`\n\nIs the plugin enabled?\n\n### `output`\n\nType: `string`\n\nDefault: `assets-manifest.json`\n\nThis is where to save the manifest file relative to your webpack `output.path`.\n\n### `assets`\n\nType: `object`\n\nDefault: `{}`\n\nData is stored in this object.\n\n#### Sharing data\n\nYou can share data between instances by passing in your own object in the `assets` option.\n\nThis is useful in [multi-compiler mode](https://github.com/webpack/webpack/tree/master/examples/multi-compiler).\n\n```js\nconst data = Object.create(null);\n\nconst manifest1 = new WebpackAssetsManifest({\n  assets: data,\n});\n\nconst manifest2 = new WebpackAssetsManifest({\n  assets: data,\n});\n```\n\n### `contextRelativeKeys`\n\nType: `boolean`\n\nDefault: `false`\n\nKeys are relative to the compiler context.\n\n### `space`\n\nType: `int`\n\nDefault: `2`\n\nNumber of spaces to use for pretty printing.\n\n### `replacer`\n\nType: `null`, `function`, or `array`\n\nDefault: `null`\n\n[Replacer reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#The_replacer_parameter)\n\nYou'll probably want to use the `transform` hook instead.\n\n### `fileExtRegex`\n\nType: `regex`\n\nDefault: `/\\.\\w{2,4}\\.(?:map|gz)$|\\.\\w+$/i`\n\nThis is the regular expression used to find file extensions. You'll probably never need to change this.\n\n### `writeToDisk`\n\nType: `boolean`, `string`\n\nDefault: `'auto'`\n\nWrite the manifest to disk using `fs`.\n\n: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.\n\n### `sortManifest`\n\nType: `boolean`, `function`\n\nDefault: `true`\n\nThe manifest is sorted alphabetically by default. You can turn off sorting by setting `sortManifest: false`.\n\nIf you want more control over how the manifest is sorted, you can provide your own [comparison function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Parameters). See the [sorted](examples/sorted.js) example.\n\n```js\nnew WebpackAssetsManifest({\n  sortManifest(left, right) {\n    // Return -1, 0, or 1\n  },\n});\n```\n\n### `merge`\n\nType: `boolean`, `string`\n\nDefault: `false`\n\nIf 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.\n\n```js\nnew WebpackAssetsManifest({\n  output: '/path/to/manifest.json',\n  merge: true,\n});\n```\n\nIf you need to customize during merge, use `merge: 'customize'`.\n\nIf you want to know if `customize` was called when merging with an existing manifest, you can check `manifest.isMerging`.\n\n```js\nnew WebpackAssetsManifest({\n  merge: 'customize',\n  customize(entry, original, manifest, asset) {\n    if ( manifest.isMerging ) {\n      // Do something\n    }\n  },\n}),\n```\n\n### `publicPath`\n\nType: `string`, `function`, `boolean`,\n\nDefault: `null`\n\nWhen using `publicPath: true`, your webpack config `output.publicPath` will be used as the value prefix.\n\n```js\nconst manifest = new WebpackAssetsManifest({\n  publicPath: true,\n});\n```\n\nWhen using a string, it will be the value prefix. One common use is to prefix your CDN URL.\n\n```js\nconst manifest = new WebpackAssetsManifest({\n  publicPath: 'https://cdn.example.com',\n});\n```\n\nIf you'd like to have more control, use a function. See the [custom CDN](examples/custom-cdn.js) example.\n\n```js\nconst manifest = new WebpackAssetsManifest({\n  publicPath(filename, manifest) {\n    // customize filename here\n    return filename;\n  },\n});\n```\n\n### `entrypoints`\n\nType: `boolean`\n\nDefault: `false`\n\nInclude `compilation.entrypoints` in the manifest file.\n\n### `entrypointsKey`\n\nType: `string`, `boolean`\n\nDefault: `entrypoints`\n\nIf this is set to `false`, the `entrypoints` will be added to the root of the manifest.\n\n### `entrypointsUseAssets`\n\nType: `boolean`\n\nDefault: `false`\n\nEntrypoint data should use the value from `assets`, which means the values could be customized and not just a `string` file path. This new option defaults to `false` so the new behavior is opt-in.\n\n### `integrity`\n\nType: `boolean`\n\nDefault: `false`\n\nInclude the [subresource integrity hash](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).\n\n### `integrityHashes`\n\nType: `array`\n\nDefault: `[ 'sha256', 'sha384', 'sha512' ]`\n\nHash algorithms to use when generating SRI. For browsers, the currently the allowed integrity hashes are `sha256`, `sha384`, and `sha512`.\n\nOther 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](https://aws.amazon.com/premiumsupport/knowledge-center/data-integrity-s3/), you could use something like this [example](examples/aws-s3-data-integrity.js) to record the `md5` hashes.\n\n### `integrityPropertyName`\n\nType: `string`\n\nDefault: `integrity`\n\nThis 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.\n\nYou'll probably only need to change this if you're using multiple instances of this plugin to create different manifests.\n\n### `apply`\n\nType: `function`\n\nDefault: `null`\n\nCallback to run after setup is complete.\n\n### `customize`\n\nType: `function`\n\nDefault: `null`\n\nCallback to customize each entry in the manifest.\n\nYou can use this to customize entry names for example. In the sample below, we adjust `img` keys so that it's easier to use them with a template engine:\n\n```javascript\nnew WebpackAssetsManifest({\n  customize(entry, original, manifest, asset) {\n    if (manifest.utils.isKeyValuePair(entry) \u0026\u0026 entry.key.startsWith('img/')) {\n      return { key: entry.key.split('img/')[1], value: entry.value };\n    }\n\n    return entry;\n  }\n}\n```\n\nThe function is called per each entry and provides you a way to intercept and rewrite each object. The result is then merged into a whole manifest.\n\n[View the example](examples/customized.js) to see what else you can do with this function.\n\n### `transform`\n\nType: `function`\n\nDefault: `null`\n\nCallback to transform the entire manifest.\n\n### `done`\n\nType: `function`\n\nDefault: `null`\n\nCallback to run after the compilation is done and the manifest has been written.\n\n---\n\n### Hooks\n\nThis plugin is using hooks from [Tapable](https://github.com/webpack/tapable/).\n\nThe `apply`, `customize`, `transform`, and `done` options are automatically tapped into the appropriate hook.\n\n| Name           | Type                | Callback signature                             |\n| -------------- | ------------------- | ---------------------------------------------- |\n| `apply`        | `SyncHook`          | `function(manifest){}`                         |\n| `customize`    | `SyncWaterfallHook` | `function(entry, original, manifest, asset){}` |\n| `transform`    | `SyncWaterfallHook` | `function(assets, manifest){}`                 |\n| `done`         | `AsyncSeriesHook`   | `async function(manifest, stats){}`            |\n| `options`      | `SyncWaterfallHook` | `function(options){}`                          |\n| `afterOptions` | `SyncHook`          | `function(options){}`                          |\n\n#### Tapping into hooks\n\nTap into a hook by calling the `tap` method on the hook as shown below.\n\nIf you want more control over exactly what gets added to your manifest, then use the `customize` and `transform` hooks. See the [customized](examples/customized.js) and [transformed](examples/transformed.js) examples.\n\n```js\nconst manifest = new WebpackAssetsManifest();\n\nmanifest.hooks.apply.tap('YourPluginName', function (manifest) {\n  // Do something here\n  manifest.set('some-key', 'some-value');\n});\n\nmanifest.hooks.customize.tap('YourPluginName', function (entry, original, manifest, asset) {\n  // customize entry here\n  return entry;\n});\n\nmanifest.hooks.transform.tap('YourPluginName', function (assets, manifest) {\n  // customize assets here\n  return assets;\n});\n\nmanifest.hooks.options.tap('YourPluginName', function (options) {\n  // customize options here\n  return options;\n});\n\nmanifest.hooks.done.tap('YourPluginName', function (manifest, stats) {\n  console.log(`The manifest has been written to ${manifest.getOutputPath()}`);\n  console.log(`${manifest}`);\n});\n\nmanifest.hooks.done.tapPromise('YourPluginName', async (manifest, stats) =\u003e {\n  await yourAsyncOperation();\n});\n```\n\nThese hooks can also be set by passing them in the constructor options.\n\n```js\nnew WebpackAssetsManifest({\n  done(manifest, stats) {\n    console.log(`The manifest has been written to ${manifest.getOutputPath()}`);\n    console.log(`${manifest}`);\n  },\n});\n```\n\n## Manifest methods\n\nIf the manifest instance is passed to a hook, you can use the following methods to manage what goes into the manifest.\n\n- `has(key)`\n- `get(key)`\n- `set(key, value)`\n- `setRaw(key, value)`\n- `delete(key)`\n\nIf you want to write the manifest to another location, you can use `writeTo(destination)`.\n\n```js\nnew WebpackAssetsManifest({\n  async done(manifest) {\n    await manifest.writeTo('/some/other/path/assets-manifest.json');\n  },\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdeveric%2Fwebpack-assets-manifest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdeveric%2Fwebpack-assets-manifest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdeveric%2Fwebpack-assets-manifest/lists"}