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