Chunk Manifest Webpack Plugin

1.1.2 verified Sat Apr 25 auth: no javascript deprecated

A Webpack plugin (v1.1.2, final release, no updates since 2017) that exports chunk id to asset file mappings as an external JSON manifest, enabling long-term caching by removing asset hashes from the bootstrap chunk. Key differentiators: earlier alternative to Webpack's built-in runtime chunk extraction; requires manual client-side loading of the manifest JSON; only supports Webpack 2 or 3 and is incompatible with modern Webpack versions (4+).

Common errors

error Can't resolve 'chunk-manifest-webpack-plugin' ↓

cause Package not installed or misspelled.

fix

Run npm install --save-dev chunk-manifest-webpack-plugin (note: 'chunk', not 'chunk' typo).

error TypeError: ChunkManifestPlugin is not a constructor ↓

cause Incorrect import style (destructured require).

fix

Use const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');

error ERROR in chunk manifest not found ↓

cause Manifest file not loaded/written correctly; plugin ran but output missing.

fix

Ensure filename matches the output path and that the file is served.

Warnings

deprecated Package is unmaintained and incompatible with Webpack 4+. ↓

fix Migrate to Webpack 4+'s built-in runtime chunk extraction or use tools like `webpack-manifest-plugin`.

breaking Webpack 3+ changed chunk loading logic; plugin may not work correctly with async chunks. ↓

fix Test thoroughly with webpack 3; consider alternative plugins.

gotcha The `inlineManifest` option only works when `html-webpack-plugin` is also used. ↓

fix Install and configure `html-webpack-plugin` if you want inline manifest.

Install

npm install chunk-manifest-webpack-plugin

yarn add chunk-manifest-webpack-plugin

pnpm add chunk-manifest-webpack-plugin

Imports

ChunkManifestPlugin

wrong

import ChunkManifestPlugin from 'chunk-manifest-webpack-plugin';

correct

const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');

Package does not export ESM; CommonJS only.

default

wrong

const { ChunkManifestPlugin } = require('chunk-manifest-webpack-plugin');

correct

const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');

The plugin is exported as a single constructor function, not a named export.

new ChunkManifestPlugin(...)

wrong

new ChunkManifestPlugin(filename: 'manifest.json')

correct

new ChunkManifestPlugin({ filename: 'manifest.json' })

Options must be passed as an object argument.

Quickstart

Configures the plugin to output a manifest.json and uses HtmlWebpackPlugin to inject it, with client-side fetch to load the manifest.

// webpack.config.js
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js'
  },
  plugins: [
    new ChunkManifestPlugin({
      filename: 'manifest.json',
      manifestVariable: 'webpackManifest',
      inlineManifest: false
    }),
    new HtmlWebpackPlugin({
      template: 'index.ejs'
    })
  ]
};

// index.ejs
<script>
  // Load manifest.json (e.g., via fetch) and assign to window.webpackManifest
  fetch('/manifest.json')
    .then(res => res.json())
    .then(manifest => { window.webpackManifest = manifest; });
</script>