{"id":20783,"library":"webpack-inline-manifest-plugin","title":"webpack-inline-manifest-plugin","description":"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.","status":"active","version":"4.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/almothafar/webpack-inline-manifest-plugin","tags":["javascript","webpack","plugin","manifest","runtime","webpack-inline-manifest-plugin"],"install":[{"cmd":"npm install webpack-inline-manifest-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-inline-manifest-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-inline-manifest-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required because the plugin injects the manifest into the HTML template; must be v2.10.0 or higher.","package":"html-webpack-plugin","optional":false}],"imports":[{"note":"Package does not ship ESM exports; CommonJS require is the only way. Version 4.x has no default export.","wrong":"import WebpackInlineManifestPlugin from 'webpack-inline-manifest-plugin';","symbol":"WebpackInlineManifestPlugin","correct":"const WebpackInlineManifestPlugin = require('webpack-inline-manifest-plugin');"},{"note":"TypeScript users must use import = require syntax due to CommonJS-only module.","wrong":"import WebpackInlineManifestPlugin from 'webpack-inline-manifest-plugin';","symbol":"WebpackInlineManifestPlugin (default import in TS)","correct":"import WebpackInlineManifestPlugin = require('webpack-inline-manifest-plugin');"},{"note":"If using ESM in Node.js, the package is still CommonJS, so dynamic import returns a module with default as the constructor.","wrong":"import WebpackInlineManifestPlugin from 'webpack-inline-manifest-plugin';","symbol":"WebpackInlineManifestPlugin (ESM in node)","correct":"const { default: WebpackInlineManifestPlugin } = await import('webpack-inline-manifest-plugin');"}],"quickstart":{"code":"// webpack.config.js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst WebpackInlineManifestPlugin = require('webpack-inline-manifest-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: __dirname + '/dist'\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './src/index.ejs'\n    }),\n    new WebpackInlineManifestPlugin({\n      name: 'webpackManifest'\n    })\n  ]\n};\n\n// Must also configure CommonsChunkPlugin (webpack 4) to split manifest:\n// new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', minChunks: Infinity })\n// Then in template: <%= htmlWebpackPlugin.files.webpackManifest %>","lang":"javascript","description":"Basic setup to inline the webpack runtime manifest into the HTML via HtmlWebpackPlugin and CommonsChunkPlugin for webpack 4."},"warnings":[{"fix":"Upgrade to webpack 4+ or pin to webpack-inline-manifest-plugin@3.x.","message":"Version 4.0.0 drops support for webpack 3 and older. Use version 3.x for webpack 3 projects.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Consider migrating to webpack 5 and using an alternative like inline-chunk-html-webpack-plugin.","message":"The plugin relies on CommonsChunkPlugin which is deprecated in webpack 4. Use `optimization.splitChunks` instead.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Use any other name, e.g., 'webpackManifest' as shown in the docs.","message":"The `name` option must not be 'manifest' because HtmlWebpackPlugin reserves that key for HTML5 app cache manifest.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure a chunk named 'manifest' (or the name you want to inline) is split out in the webpack config.","message":"The plugin only works when manifest chunk is extracted via CommonsChunkPlugin (or equivalent). If the manifest is not a separate chunk, nothing is inlined.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install webpack-inline-manifest-plugin --save-dev` and use `require('webpack-inline-manifest-plugin')`.","cause":"Missing npm install or incorrect import syntax in ESM context.","error":"Cannot find module 'webpack-inline-manifest-plugin'"},{"fix":"Use `const WebpackInlineManifestPlugin = require('webpack-inline-manifest-plugin');` or if in ESM: `const { default: WebpackInlineManifestPlugin } = await import(...)`.","cause":"Using ES6 import syntax (import X from ...) on a CommonJS-only module.","error":"TypeError: WebpackInlineManifestPlugin is not a constructor"},{"fix":"Add `new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' })` and ensure the option name passed to the plugin matches the key used in template.","cause":"The manifest chunk was not created or not named correctly in webpack config.","error":"htmlWebpackPlugin.files.webpackManifest is undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}