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.

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"
}

Configuration

A manifest is configurable using constructor options:

new ManifestPlugin({
  fileName: 'my-manifest.json',
  basePath: '/app/'
})

Options:

• fileName: The manifest filename in your output directory (manifest.json by default).
• basePath: A path prefix for all file references. Useful for including your output path in the manifest.
• publicPath: A path prefix used only on output files, similar to Webpack's output.publicPath. Ignored if basePath was also provided.
• stripSrc: removes unwanted strings from source filenames (string or regexp)
• writeToFileEmit: If set to true will emit to build folder and memory in combination with webpack-dev-server
• cache: In multi-compiler mode webpack will overwrite the manifest on each compilation. Passing a shared {} as the cache option into each compilation's ManifestPlugin will combine the manifest between compilations.