Inline Manifest Webpack Plugin

4.0.2 verified Sat Apr 25 auth: no javascript maintenance

Webpack plugin that inlines the webpack runtime chunk (manifest.js) directly into the HTML via a script tag, eliminating an extra HTTP request. Version 4.0.2 supports webpack 4+ and HtmlWebpackPlugin 3. It is a lightweight alternative to manual extraction/injection patterns. Releases are infrequent; the plugin is stable for its niche use case. Key differentiator: simple configuration, works by replacing the external script reference with inline code in the generated HTML.

Common errors

error TypeError: Cannot read property 'assets' of undefined ↓

cause Plugin is executed before HtmlWebpackPlugin hook runs, meaning the HTML template is not available yet.

fix

Place InlineManifestWebpackPlugin after HtmlWebpackPlugin in the plugins array.

error InlineManifestWebpackPlugin is not a constructor ↓

cause Using named import instead of default import in CommonJS (require).

fix

Use const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin'); without destructuring.

error Script tag for 'runtime' not found in HTML ↓

cause Runtime chunk name mismatch or missing runtimeChunk configuration.

fix

Ensure optimization.runtimeChunk is set to 'single' or an object with a name that matches the plugin argument.

Warnings

breaking Version 4.0.0+ requires webpack 4 and HtmlWebpackPlugin 3. Older webpack 3 versions should use v3.x of this plugin. ↓

fix Downgrade to inline-manifest-webpack-plugin@3 or upgrade webpack to 4+.

gotcha The plugin must be placed after HtmlWebpackPlugin in the plugins array, otherwise it won't work. ↓

fix Reorder plugins: put HtmlWebpackPlugin first, then InlineManifestWebpackPlugin.

gotcha If you change the runtime chunk name via optimization.runtimeChunk.name, you must pass that name as a string to the plugin constructor. ↓

fix Ensure the argument to new InlineManifestWebpackPlugin('your-chunk-name') matches the runtime chunk name exactly.

Install

npm install inline-manifest-webpack-plugin

yarn add inline-manifest-webpack-plugin

pnpm add inline-manifest-webpack-plugin

Imports

InlineManifestWebpackPlugin
wrong
```
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin').default;
```
correct
```
import InlineManifestWebpackPlugin from 'inline-manifest-webpack-plugin'
```
This package has a CommonJS default export, so both ES import and require work. However, using require with .default is incorrect.

InlineManifestWebpackPlugin (CommonJS)

wrong

const { InlineManifestWebpackPlugin } = require('inline-manifest-webpack-plugin');

correct

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

The package exports a single class as a default export. Named destructuring will fail, giving undefined.

InlineManifestWebpackPlugin with options
wrong
```
new InlineManifestWebpackPlugin({ name: 'runtime' })
```
correct
```
new InlineManifestWebpackPlugin('runtime')
```
The constructor expects a single string argument (the runtime chunk name), not an options object. Passing an object will cause it to be treated as the name (stringified to '[object Object]').

Quickstart

Basic webpack configuration to inline the runtime chunk into the HTML file, reducing HTTP requests.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  optimization: {
    runtimeChunk: 'single'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new InlineManifestWebpackPlugin()
  ]
};