webpack-manifest-plugin
Advanced tools
Package description
The webpack-manifest-plugin is a Webpack plugin that generates an asset manifest file. This manifest maps the original filenames to the output filenames generated by Webpack, which is useful for integrating Webpack with server-side code and caching strategies.
Generate a manifest file
This feature generates a manifest file that maps the original filenames to the output filenames. The 'fileName' option specifies the name of the manifest file, 'basePath' is a path prefix for all keys, and 'publicPath' is a path prefix for all values.
const WebpackManifestPlugin = require('webpack-manifest-plugin');
module.exports = {
// ... other webpack config settings ...
plugins: [
new WebpackManifestPlugin({
fileName: 'manifest.json',
basePath: '/app/',
publicPath: '/public/'
})
]
};Filter files
This feature allows filtering of files to be included in the manifest based on custom logic. In this example, only JavaScript and CSS files are included.
new WebpackManifestPlugin({
filter: (file) => {
// Only include .js and .css files in the manifest
return file.name.match(/\.(js|css)$/);
}
});Customize manifest entries
This feature allows customization of how the manifest entries are generated. In this example, the 'generate' function is used to create a custom structure for the manifest.
new WebpackManifestPlugin({
generate: (seed, files) => {
return files.reduce((manifest, file) => {
manifest[file.name] = file.path;
return manifest;
}, seed);
}
});Similar to webpack-manifest-plugin, assets-webpack-plugin also generates a manifest file with the mapping of all source file names to their corresponding output file. However, it provides more options for customizing the output, such as different file formats (JSON, YAML, etc.) and the ability to include additional information like chunk relations.
This package is a similar plugin that creates a JSON file that maps the original filenames to the output filenames. It has features like HMR support, customizable output using hooks, and the ability to merge with an existing manifest file.
While it also generates a manifest, webpack-pwa-manifest is specifically focused on creating the manifest.json file for Progressive Web Apps (PWAs), including icons and other PWA-related configurations, which is different from the general asset mapping provided by webpack-manifest-plugin.
Readme
A Webpack plugin for generating an asset manifest.
:heart: Please consider Sponsoring my work
webpack-manifest-plugin is an evergreen 🌲 module.
This module requires an Active LTS Node version (v12.0.0+) and Webpack v5.0.0.
This repository leverages pnpm for dependency management.
To begin, please install pnpm:
$ npm install pnpm -g
Using npm:
npm install webpack-nano webpack-manifest-plugin --save-dev
Note: We recommend using webpack-nano, a very tiny, very clean webpack CLI.
Create a webpack.config.js file:
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const options = { ... };
module.exports = {
// an example entry definition
entry: [ 'app.js' ],
...
plugins: [
new WebpackManifestPlugin(options)
]
};
And run webpack:
$ npx wp
With the default options, the example above will create a manifest.json file in the output directory for the build. The manifest file will contain a map of source filenames to the corresponding build output file. e.g.
{
"dist/batman.js": "dist/batman.1234567890.js",
"dist/joker.js": "dist/joker.0987654321.js"
}
basePathType: String
Default: ''
Specifies a path prefix for all keys in the manifest. Useful for including your output path in the manifest.
fileNameType: String
Default: manifest.json
Specifies the file name to use for the resulting manifest. By default the plugin will emit manifest.json to your output directory. Passing an absolute path to the fileName option will override both the file name and path.
filterType: Function
Default: undefined
Allows filtering the files which make up the manifest. The passed function should match the signature of (file: FileDescriptor) => Boolean. Return true to keep the file, false to remove the file.
generateType: Function
Default: undefined
A custom Function to create the manifest. The passed function should match the signature of (seed: Object, files: FileDescriptor[], entries: string[]) => Object and can return anything as long as it's serialisable by JSON.stringify.
mapType: Function
Default: undefined
Allows modifying the files which make up the manifest. The passed function should match the signature of (file: FileDescriptor) => FileDescriptor where an object matching FileDescriptor is returned.
publicPathType: String
Default: <webpack-config>.output.publicPath
A path prefix that will be added to values of the manifest.
removeKeyHashType: RegExp | false
Default: /([a-f0-9]{32}\.?)/gi
If set to a valid RegExp, removes hashes from manifest keys. e.g.
{
"index.c5a9bff71fdfed9b6046.html": "index.c5a9bff71fdfed9b6046.html"
}
{
"index.html": "index.c5a9bff71fdfed9b6046.html"
}
The default value for this option is a regular expression targeting Webpack's default md5 hash. To target other hashing functions / algorithms, set this option to an appropriate RegExp. To disable replacing the hashes in key names, set this option to false.
seedType: Object
Default: {}
A cache of key/value pairs used to seed the manifest. This may include a set of custom key/value pairs to include in your manifest, or may be used to combine manifests across compilations in multi-compiler mode. To combine manifests, pass a shared seed object to each compiler's WebpackManifestPlugin instance.
serializeType: Function(Object) => string
Default: undefined
A Function which can be leveraged to serialize the manifest in a different format than json. e.g. yaml.
sortType: Function
Default: undefined
Allows sorting the files which make up the manifest. The passed function should match the signature of (fileA: FileDescriptor, fileB: FileDescriptor) => Number. Return 0 to indicate no change, -1 to indicate the file should be moved to a lower index, and 1 to indicate the file shoud be moved to a higher index.
useEntryKeysType: Boolean
Default: false
If true, the keys specified in the entry property will be used as keys in the manifest. No file extension will be added (unless specified as part of an entry property key).
useLegacyEmitType: Boolean
Default: false
If true, the manifest will be written on the deprecated webpack emit hook to be compatible with not yet updated webpack plugins.
A lot of webpack plugins are not yet updated to match the new webpack 5 API. This is a problem when other plugins use the deprecated emit hook. The manifest will be written before these other plugins and thus files are missing on the manifest.
writeToFileEmitType: Boolean
Default: false
If true, will emit the manifest to the build directory and in memory for compatibility with webpack-dev-server.
This plugin utilizes the following object structure to work with files. Many options for this plugin utilize the structure below.
{
chunk?: Chunk;
isAsset: boolean;
isChunk: boolean;
isInitial: boolean;
isModuleAsset: boolean;
name: string | null;
path: string;
}
chunkType: Chunk
Only available if isChunk is true
isInitialType: Boolean
Is required to run you app. Cannot be true if isChunk is false.
isModuleAssetType: Boolean
Is required by a module. Cannot be true if isAsset is false.
This plugin supports the following hooks via the getCompilerHooks export; afterEmit, beforeEmit. These hooks can be useful, e.g. changing manifest contents before emitting to disk.
getCompilerHooksReturns: { afterEmit: SyncWaterfallHook, beforeEmit: SyncWaterfallHook }
assetHookStageType: Number
Default: Infinity
If you need to consume the output of this plugin in another plugin, it can be useful to adjust the stage at which the manifest is generated. Pass a new stage to assetHookStage to change when the manifest is generated. See the docs on processAssets for more detail.
Note: any files added to the compilation after the stage specified will not be included in the manifest.
const { getCompilerHooks } = require('webpack-manifest-plugin');
class BatmanPlugin {
apply(compiler) {
const { beforeEmit } = getCompilerHooks(compiler);
beforeEmit.tap('BatmanPlugin', (manifest) => {
return { ...manifest, name: 'hello' };
});
}
}
webpack-clean and webpack-dev-server, please review this issue.Special thanks to Dane Thurber, the original author of this plugin, without whom this plugin would not exist.
FAQs
A Webpack Plugin for generating Asset Manifests
The npm package webpack-manifest-plugin receives a total of 2,549,083 weekly downloads. As such, webpack-manifest-plugin popularity was classified as popular.
We found that webpack-manifest-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.