webpack-manifest-plugin

What is webpack-manifest-plugin?

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.

What are webpack-manifest-plugin's main functionalities?

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

Other packages similar to webpack-manifest-plugin

assets-webpack-plugin

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.

webpack-assets-manifest

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.

webpack-pwa-manifest

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

Webpack Manifest Plugin

Webpack plugin for generating an asset manifest.

NOTE: The following is related to the next major version of webpack-manifest-plugin, please check https://github.com/danethurber/webpack-manifest-plugin/blob/1.x/README.md for v1 documentation

Install

npm install --save-dev webpack-manifest-plugin

Usage

In your webpack.config.js

var ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
    // ...
    plugins: [
      new ManifestPlugin()
    ]
};

This will generate a manifest.json file in your root output directory with a mapping of all source file names to their corresponding output file, for example:

{
  "mods/alpha.js": "mods/alpha.1234567890.js",
  "mods/omega.js": "mods/omega.0987654321.js"
}

API:

// webpack.config.js

module.exports = {
  output: {
    publicPath
  },
  plugins: [
    new ManifestPlugin(options)
  ]
}

options.fileName

Type: String
Default: manifest.json

The manifest filename in your output directory.

options.publicPath

Type: String Default: output.publicPath

A path prefix that will be added to values of the manifest.

options.basePath

Type: String

A path prefix for all keys. Useful for including your output path in the manifest.

options.writeToFileEmit

Type: Boolean
Default: false

If set to true will emit to build folder and memory in combination with webpack-dev-server

options.seed

Type: Object
Default: {}

A cache of key/value pairs to 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 ManifestPlugin instance.

options.filter

Type: Function(FileDescriptor): Boolean

Filter out files. FileDescriptor typings

options.map

Type: Function(FileDescriptor): FileDescriptor

Modify files details before the manifest is created. FileDescriptor typings

options.sort

Type: Function(FileDescriptor): number

Sort files before they are passed to generate. FileDescriptor typings

options.generate

Type: Function(Object, FileDescriptor, string[]): Object
Default: (seed, files, entrypoints) => files.reduce((manifest, {name, path}) => ({...manifest, [name]: path}), seed)

Create the manifest. It can return anything as long as it's serialisable by JSON.stringify. FileDescriptor typings

options.serialize

Type: Function(Object): string
Default: (manifest) => JSON.stringify(manifest, null, 2)

Output manifest file in different format then json (i.e. yaml).

FileDescriptor

FileDescriptor {
  path: string;
  name: string | null;
  isInitial: boolean;
  isChunk: boolean;
  chunk?: Chunk;
  isAsset: boolean;
  isModuleAsset: boolean;
}

chunk

Type: Chunk

Only available is isChunk is true

isInitial

Type: Boolean

Is required to run you app. Cannot be true if isChunk is false.

isModuleAsset

Type: Boolean

Is required by a module. Cannot be true if isAsset is false.

License

MIT © Dane Thurber