webpack-inline-manifest-plugin

4.0.1 verified Sat Apr 25 auth: no javascript

A webpack plugin that inlines the runtime manifest chunk as an inline script tag in the HTML, eliminating an extra HTTP request. Current stable version is 4.0.1, maintained infrequently. It requires HtmlWebpackPlugin (v2.10+). Unlike alternatives that extract the manifest to a file, this plugin embeds the runtime JavaScript directly into the HTML generated by HtmlWebpackPlugin. It is only intended for webpack 4 and above (v4 drops support for webpack 3). The plugin is lightweight with no extra runtime dependencies, but its feature set is minimal and may not be actively developed.

Common errors

error Cannot find module 'webpack-inline-manifest-plugin' ↓

cause Missing npm install or incorrect import syntax in ESM context.

fix

Run npm install webpack-inline-manifest-plugin --save-dev and use require('webpack-inline-manifest-plugin').

error TypeError: WebpackInlineManifestPlugin is not a constructor ↓

cause Using ES6 import syntax (import X from ...) on a CommonJS-only module.

fix

Use const WebpackInlineManifestPlugin = require('webpack-inline-manifest-plugin'); or if in ESM: const { default: WebpackInlineManifestPlugin } = await import(...).

error htmlWebpackPlugin.files.webpackManifest is undefined ↓

cause The manifest chunk was not created or not named correctly in webpack config.

fix

Add new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' }) and ensure the option name passed to the plugin matches the key used in template.

Warnings

breaking Version 4.0.0 drops support for webpack 3 and older. Use version 3.x for webpack 3 projects. ↓

fix Upgrade to webpack 4+ or pin to webpack-inline-manifest-plugin@3.x.

deprecated The plugin relies on CommonsChunkPlugin which is deprecated in webpack 4. Use `optimization.splitChunks` instead. ↓

fix Consider migrating to webpack 5 and using an alternative like inline-chunk-html-webpack-plugin.

gotcha The `name` option must not be 'manifest' because HtmlWebpackPlugin reserves that key for HTML5 app cache manifest. ↓

fix Use any other name, e.g., 'webpackManifest' as shown in the docs.

gotcha The plugin only works when manifest chunk is extracted via CommonsChunkPlugin (or equivalent). If the manifest is not a separate chunk, nothing is inlined. ↓

fix Ensure a chunk named 'manifest' (or the name you want to inline) is split out in the webpack config.

Install

npm install webpack-inline-manifest-plugin

yarn add webpack-inline-manifest-plugin

pnpm add webpack-inline-manifest-plugin

Imports

WebpackInlineManifestPlugin

wrong

import WebpackInlineManifestPlugin from 'webpack-inline-manifest-plugin';

correct

const WebpackInlineManifestPlugin = require('webpack-inline-manifest-plugin');

Package does not ship ESM exports; CommonJS require is the only way. Version 4.x has no default export.

WebpackInlineManifestPlugin (default import in TS)

wrong

import WebpackInlineManifestPlugin from 'webpack-inline-manifest-plugin';

correct

import WebpackInlineManifestPlugin = require('webpack-inline-manifest-plugin');

TypeScript users must use import = require syntax due to CommonJS-only module.

WebpackInlineManifestPlugin (ESM in node)

wrong

import WebpackInlineManifestPlugin from 'webpack-inline-manifest-plugin';

correct

const { default: WebpackInlineManifestPlugin } = await import('webpack-inline-manifest-plugin');

If using ESM in Node.js, the package is still CommonJS, so dynamic import returns a module with default as the constructor.

Quickstart

Basic setup to inline the webpack runtime manifest into the HTML via HtmlWebpackPlugin and CommonsChunkPlugin for webpack 4.

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.ejs'
    }),
    new WebpackInlineManifestPlugin({
      name: 'webpackManifest'
    })
  ]
};

// Must also configure CommonsChunkPlugin (webpack 4) to split manifest:
// new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', minChunks: Infinity })
// Then in template: <%= htmlWebpackPlugin.files.webpackManifest %>