Webpack Chunks to JSON Plugin

1.0.4 · maintenance · verified Tue Apr 21

chunks-2-json-webpack-plugin is a utility plugin specifically designed for Webpack 4, which outputs a JSON manifest of your project's build artifacts. Its core purpose is to provide an external system with a predictable map of generated chunk filenames, particularly when these names include content hashes for caching. This addresses common scenarios where a deployment environment needs to dynamically reference or inject build assets without direct knowledge of Webpack's output naming conventions. The current stable version is 1.0.4, though the project appears to be in maintenance mode given its specific tie to Webpack 4. It differentiates itself by offering a simple, dependency-free solution for Webpack 4, producing a configurable JSON structure that details file types (e.g., `js`, `css`, `js.map`) grouped by chunk names, facilitating easier integration with external rendering systems.

Warnings

breaking In version 1.0.0, the internal data structure for chunk sources changed. They are now treated as an array rather than a string. This breaks compatibility with configurations or consumers expecting the older string format.
Fix: Update any code that processes the output JSON to expect `chunk.sources` as an array, not a string.
gotcha This plugin is specifically built for Webpack 4. It is not compatible with Webpack 5 or later versions due to significant changes in Webpack's internal architecture and plugin API.
Fix: Ensure your project is running Webpack 4. For Webpack 5+, seek alternative manifest plugins designed for that version.
gotcha The `publicPath` option for the plugin should almost always match the `output.publicPath` setting in your main Webpack configuration to ensure correct paths are generated in the manifest.
Fix: Align `new Chunks2JsonPlugin({ publicPath: ... })` with `output: { publicPath: ... }`.

Install

npm install chunks-2-json-webpack-plugin npm
yarn add chunks-2-json-webpack-plugin yarn
pnpm add chunks-2-json-webpack-plugin pnpm

Imports

Chunks2JsonPlugin
wrong:
```
import { Chunks2JsonPlugin } from 'chunks-2-json-webpack-plugin';
```
correct:
```
const Chunks2JsonPlugin = require('chunks-2-json-webpack-plugin');
```
This plugin is designed for Webpack 4 configurations, which primarily use CommonJS for plugin instantiation. Direct ESM import syntax is not officially supported or commonly used in this context.

Quickstart

This example demonstrates how to configure the plugin in a Webpack 4 `webpack.config.js` file to output a `build-manifest.json` file, specifying an output directory and public path.

const Chunks2JsonPlugin = require('chunks-2-json-webpack-plugin');
const path = require('path');

const publicPath = '/app/';

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath
  },
  plugins: [
    new Chunks2JsonPlugin({ outputDir: 'dist/', publicPath })
  ]
};

view raw JSON →