html-webpack-inline-chunk-plugin

1.1.1 verified Sat Apr 25 auth: no javascript maintenance

Webpack plugin that inlines specific chunks (like the webpack runtime manifest) directly into HTML files via HtmlWebpackPlugin, eliminating extra HTTP requests. Version 1.1.1 is the latest stable release, with no active development in recent years. It requires HtmlWebpackPlugin v2.10.0 or higher and supports webpack up to version 4 (CommonsChunkPlugin era). Unlike newer alternatives (e.g., InlineChunkHtmlPlugin for webpack 5), this plugin uses the older HtmlWebpackPlugin API and does not support webpack 5's default runtime chunking.

Common errors

error TypeError: Cannot read properties of undefined (reading 'filter') ↓

cause HtmlWebpackPlugin not installed or not added to plugins array before this plugin.

fix

Install and add HtmlWebpackPlugin to your webpack plugins array before InlineChunkWebpackPlugin.

error Module not found: Error: Can't resolve 'html-webpack-plugin' ↓

cause Missing html-webpack-plugin as a dependency.

fix

Run 'npm install html-webpack-plugin --save-dev'.

error InlineChunkWebpackPlugin is not a constructor ↓

cause Using ES6 import syntax or incorrect require path.

fix

Use 'const InlineChunkWebpackPlugin = require("html-webpack-inline-chunk-plugin");' — do not import from default.

Warnings

breaking This plugin is incompatible with webpack 5 because webpack 5 removed CommonsChunkPlugin and changed HtmlWebpackPlugin hooks. ↓

fix Use InlineChunkHtmlPlugin from 'react-dev-utils' or html-webpack-plugin's 'inject' option instead.

deprecated CommonsChunkPlugin is deprecated in webpack 4; use optimization.splitChunks instead. ↓

fix Migrate to webpack 4's splitChunks and use this plugin only for webpack 4 projects with CommonsChunkPlugin.

gotcha The option 'inlineChunks' must match the chunk name exactly. Common mistake: using 'manifest' when the chunk is named 'runtime'. ↓

fix Check your webpack configuration for the actual chunk name (e.g., 'manifest', 'runtime').

gotcha This plugin depends on HtmlWebpackPlugin's 'alterAssetTags' hook, which may not fire if HtmlWebpackPlugin is not configured correctly or if the hook signature changes. ↓

fix Ensure HtmlWebpackPlugin is included in plugins array before this plugin, and use HtmlWebpackPlugin 2.10+.

Install

npm install html-webpack-inline-chunk-plugin

yarn add html-webpack-inline-chunk-plugin

pnpm add html-webpack-inline-chunk-plugin

Imports

default

wrong

import InlineChunkWebpackPlugin from 'html-webpack-inline-chunk-plugin';

correct

const InlineChunkWebpackPlugin = require('html-webpack-inline-chunk-plugin');

This package does not export ES modules; use CommonJS require.

default

wrong

new InlineChunkWebpackPlugin({ inlineChunks: ['manifest'] }).apply()

correct

new InlineChunkWebpackPlugin({ inlineChunks: ['manifest'] })

Do not call .apply() manually; webpack calls it automatically when added to plugins array.

default

wrong

const InlineChunkWebpackPlugin = require('html-webpack-inline-chunk-plugin').default;

correct

const InlineChunkWebpackPlugin = require('html-webpack-inline-chunk-plugin');

The package exports the constructor directly, not as a default property.

Quickstart

Demonstrates inlining webpack runtime chunk (manifest) into HTML using CommonsChunkPlugin.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineChunkWebpackPlugin = require('html-webpack-inline-chunk-plugin');
const webpack = require('webpack');

module.exports = {
  entry: { main: './src/index.js' },
  output: { path: __dirname + '/dist', filename: '[name].[contenthash].js' },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', minChunks: Infinity }),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new InlineChunkWebpackPlugin({ inlineChunks: ['manifest'] })
  ]
};