# webpack-inline-manifest-plugin

> Inline the webpack runtime/manifest chunk with a tag to save an HTTP request.

Latest version **5.0.0** (published 2026-06-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-inline-manifest-plugin
pnpm add webpack-inline-manifest-plugin
yarn add webpack-inline-manifest-plugin
bun add webpack-inline-manifest-plugin
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2026-06-11 |
| First published | 2018-03-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10.13.0 |
| Dependencies | 0 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Al-Mothafar Al-Hasan |
| Maintainers | almothafar |
| Keywords | webpack, webpack-plugin, webpack5, plugin, manifest, runtime, runtimeChunk, inline, html-webpack-plugin, webpack-inline-manifest-plugin |

## Links

- npm: https://www.npmjs.com/package/webpack-inline-manifest-plugin
- Repository: https://github.com/almothafar/webpack-inline-manifest-plugin
- Homepage: https://github.com/almothafar/webpack-inline-manifest-plugin#readme
- Issues: https://github.com/almothafar/webpack-inline-manifest-plugin/issues
- npm.io page: https://npm.io/package/webpack-inline-manifest-plugin

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 5.0.0 (latest) — 2026-06-11
- 4.0.1 — 2018-03-22
- 4.0.0 — 2018-03-15

## README

# Webpack Inline Manifest Plugin

[![CI](https://github.com/almothafar/webpack-inline-manifest-plugin/actions/workflows/ci.yml/badge.svg)](https://github.com/almothafar/webpack-inline-manifest-plugin/actions/workflows/ci.yml) [![npm version](https://img.shields.io/npm/v/webpack-inline-manifest-plugin.svg)](https://www.npmjs.com/package/webpack-inline-manifest-plugin) [![npm downloads](https://img.shields.io/npm/dm/webpack-inline-manifest-plugin.svg)](https://www.npmjs.com/package/webpack-inline-manifest-plugin) [![install size](https://packagephobia.com/badge?p=webpack-inline-manifest-plugin)](https://packagephobia.com/result?p=webpack-inline-manifest-plugin) [![types: included](https://img.shields.io/npm/types/webpack-inline-manifest-plugin.svg)](https://github.com/almothafar/webpack-inline-manifest-plugin/blob/master/index.d.ts) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![license](https://img.shields.io/npm/l/webpack-inline-manifest-plugin.svg)](https://github.com/almothafar/webpack-inline-manifest-plugin/blob/master/LICENSE)

A [webpack](https://webpack.js.org/) plugin that **inlines the runtime/manifest chunk** with a `<script>` tag, saving one render-blocking HTTP request.

webpack's runtime is small but changes on almost every build. The common pattern is to split it into its own chunk (`optimization.runtimeChunk`) so the rest of your bundles stay long-term cacheable — but then that tiny chunk costs a separate request. This plugin embeds it directly into the HTML produced by [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) so you get the caching benefit without the extra request.

## Requirements

| webpack-inline-manifest-plugin | webpack | html-webpack-plugin | Node.js  |
| ------------------------------ | ------- | ------------------- | -------- |
| **5.x** (this version)         | 5       | 5                   | >= 10.13 |
| 4.x                            | 4       | 3                   | >= 8     |

> For **webpack 4 / html-webpack-plugin 3**, stay on [v4.0.2](https://www.npmjs.com/package/webpack-inline-manifest-plugin/v/4.0.2).

## Installation

```shell
npm install webpack-inline-manifest-plugin --save-dev
```

`webpack` and `html-webpack-plugin` are peer dependencies — you almost certainly already have them. The plugin itself has **no runtime dependencies**.

## Usage

### Step 1 — split out the runtime chunk

```js
// webpack.config.js
module.exports = {
  optimization: {
    // The chunk name must match the plugin's `name` option below.
    runtimeChunk: { name: 'webpackManifest' },
  },
};
```

> Using `runtimeChunk: 'single'` instead? That names the chunk `runtime`, so set the
> plugin's `name` option to `'runtime'`.

### Step 2 & 3 — add the plugins

Add `WebpackInlineManifestPlugin` **after** `HtmlWebpackPlugin`:

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

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin(),
    new WebpackInlineManifestPlugin({
      name: 'webpackManifest', // must equal the runtimeChunk name (default: 'webpackManifest')
    }),
  ],
};
```

That's it. With html-webpack-plugin's default `inject: true`, the plugin finds the
external `<script src="webpackManifest.js">` tag and **replaces it inline, in place** —
so load order is preserved and nothing else in your template needs to change.

### Manual placement (template mode)

If you render your own template with `inject: false`, the inline `<script>` is exposed
as `htmlWebpackPlugin.files[name]` so you can place it wherever you like:

```js
new HtmlWebpackPlugin({
  inject: false,
  template: 'src/index.ejs',
});
```

```html
<!-- src/index.ejs -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>App</title>
  </head>
  <body>
    <%= htmlWebpackPlugin.files.webpackManifest %>
  </body>
</html>
```

## Options

| Option | Type     | Default             | Description                                                                                                                                                                                                                                          |
| ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | `string` | `'webpackManifest'` | The runtime chunk to inline. **Must match** your `optimization.runtimeChunk` name. Also the key used for `htmlWebpackPlugin.files[name]` in template mode. Cannot be `"manifest"` (reserved by html-webpack-plugin for the HTML5 appcache manifest). |

## How it works

- **`inject: true`** (default): taps html-webpack-plugin's `alterAssetTagGroups` hook
  and swaps the runtime's `<script src>` tag for an inline `<script>` containing its
  code. `nonce` / `type` attributes are preserved (handy for CSP), while `src` / `defer`
  / `async` are dropped.
- **`inject: false`**: taps `beforeAssetTagGeneration`, removes the runtime from the
  external asset list, and exposes the inline markup as `htmlWebpackPlugin.files[name]`.
- A trailing `//# sourceMappingURL=` comment is stripped from the inlined code, and the
  asset source is normalised with `.toString()` so it works for production builds where
  webpack emits a `Buffer` (`RawSource`) instead of a string.

The runtime chunk file is still emitted to your output directory (unreferenced); leaving
it in place avoids breaking external references and service-worker precaches.

## Alternatives

This optimization matters less than it did under HTTP/1.1 (HTTP/2+ multiplexes small
requests cheaply), and inline scripts require `'unsafe-inline'` or a nonce/hash under a
strict Content-Security-Policy. If this plugin's runtime-specific, zero-config approach
(and its template-variable mode) isn't what you need, these maintained, general-purpose
options inline scripts on webpack 5 too:

- [**html-inline-script-webpack-plugin**](https://github.com/icelam/html-inline-script-webpack-plugin)
  — inline any script by filename, e.g. `scriptMatchPattern: [/runtime.*\.js$/]`.
- **`InlineChunkHtmlPlugin`** from `react-dev-utils` (used by the now-deprecated Create
  React App) — same `alterAssetTagGroups` technique.

## Migration from v4

- **Requires webpack 5 + html-webpack-plugin 5.** This is the fix for the
  `Cannot read property 'tapAsync' of undefined` crash on html-webpack-plugin v4+
  ([#27](https://github.com/szrenwei/inline-manifest-webpack-plugin/issues/27),
  [#23](https://github.com/szrenwei/inline-manifest-webpack-plugin/issues/23)).
- **Automatic injection now works with `inject: true`.** In v4 you had to use a template
  variable; now the runtime is inlined for you. The `htmlWebpackPlugin.files[name]`
  variable still works with `inject: false`.
- **The chunk lookup now honors `name`.** v4 hard-coded a lookup for a chunk literally
  named `manifest`; v5 finds the chunk named by your `name` option. Make sure `name`
  matches your `optimization.runtimeChunk` name.
- **TypeScript types are bundled** (`index.d.ts`).

## License

[MIT](LICENSE)

---
_Source: https://npm.io/package/webpack-inline-manifest-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._