{"_id":"webpack-inline-manifest-plugin","_rev":"5-192b37ae7a4bdfb790cba9504630b3c0","name":"webpack-inline-manifest-plugin","dist-tags":{"latest":"5.0.0"},"versions":{"4.0.0":{"name":"webpack-inline-manifest-plugin","version":"4.0.0","keywords":["webpack","plugin","manifest","runtime","webpack-inline-manifest-plugin"],"author":{"url":"https://github.com/almothafar","name":"Al-Mothafar Al-Hasan","email":"almothafar@gmail.com"},"license":"MIT","_id":"webpack-inline-manifest-plugin@4.0.0","maintainers":[{"name":"almothafar","email":"almothafar@gmail.com"}],"homepage":"https://github.com/almothafar/webpack-inline-manifest-plugin","bugs":{"url":"https://github.com/almothafar/webpack-inline-manifest-plugin/issues"},"dist":{"shasum":"27bd5c16281096a4c8443b15c5b88c8614911c40","tarball":"https://registry.npmjs.org/webpack-inline-manifest-plugin/-/webpack-inline-manifest-plugin-4.0.0.tgz","fileCount":7,"integrity":"sha512-lqDMAn5Ij6PaB4zYqpXov2QaLzCSUKzhKAsAZYoeX+7Wq4f+aNikXzAjyb+Wgi6BFJovGc8UXFeikHUtpGXE9w==","signatures":[{"sig":"MEUCIQCIv7h/tIScwrbAdn++KpveLX2AAI5BqLJZiecGWyaMLwIgX50fTn5Nz6SIFS084RRC5qkVq5jHQpps3Lrl77HM94o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7035},"main":"index.js","gitHead":"4a00c52c0d82c400bdd590f10e5beb198dfa8d34","scripts":{"lint":"node ./node_modules/eslint/bin/eslint.js --debug -v --color --ext .js"},"_npmUser":{"name":"almothafar","email":"almothafar@gmail.com"},"repository":{"url":"git+https://github.com/almothafar/webpack-inline-manifest-plugin.git","type":"git"},"_npmVersion":"5.7.1","description":"inline your Webpack manifest.js with a script tag to save http request","directories":{},"_nodeVersion":"8.9.4","dependencies":{"source-map-url":"0.4.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^4.18.2","eslint-plugin-promise":"^3.7.0","eslint-config-standard":"^11.0.0","eslint-plugin-standard":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/webpack-inline-manifest-plugin_4.0.0_1521106554573_0.16645787447157012","host":"s3://npm-registry-packages"}},"4.0.1":{"name":"webpack-inline-manifest-plugin","version":"4.0.1","keywords":["webpack","plugin","manifest","runtime","webpack-inline-manifest-plugin"],"author":{"url":"https://github.com/almothafar","name":"Al-Mothafar Al-Hasan","email":"almothafar@gmail.com"},"license":"MIT","_id":"webpack-inline-manifest-plugin@4.0.1","maintainers":[{"name":"almothafar","email":"almothafar@gmail.com"}],"homepage":"https://github.com/almothafar/webpack-inline-manifest-plugin","bugs":{"url":"https://github.com/almothafar/webpack-inline-manifest-plugin/issues"},"dist":{"shasum":"4fc843fcf076e8512f167dc705108b3eacafc098","tarball":"https://registry.npmjs.org/webpack-inline-manifest-plugin/-/webpack-inline-manifest-plugin-4.0.1.tgz","fileCount":9,"integrity":"sha512-A6VRqhSDEUsqf6bJmrfNDmlVr+nkI2gfPsRC2/VorUeRMqyrSVvT7ltOjUcIG0VIigTNAcN2LbE83YwFH8VTHg==","signatures":[{"sig":"MEUCIQCUO+7qWPla5zMRpuJ0d8/VMFiAOGhgSILzBDF7jsu7ywIgekx1sw0o+Nl5TA7N9RSe8SyuyCqI27Oc46/bbi6I4l0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37028},"main":"index.js","gitHead":"2f391fe371ae3ad13ed244795717749f6a2a4bb6","scripts":{"lint":"npm run eslint --debug -v --color --ext .js","eslint":"eslint"},"_npmUser":{"name":"almothafar","email":"almothafar@gmail.com"},"repository":{"url":"git+https://github.com/almothafar/webpack-inline-manifest-plugin.git","type":"git"},"_npmVersion":"5.6.0","description":"inline your Webpack manifest.js with a script tag to save http request","directories":{},"_nodeVersion":"9.7.1","dependencies":{"source-map-url":"0.4.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^4.19.1","eslint-plugin-promise":"^3.7.0","eslint-config-standard":"^11.0.0","eslint-plugin-standard":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/webpack-inline-manifest-plugin_4.0.1_1521741774314_0.1737481979867097","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"webpack-inline-manifest-plugin","version":"5.0.0","description":"Inline the webpack runtime/manifest chunk with a <script> tag to save an HTTP request.","main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","require":"./index.js","default":"./index.js"}},"engines":{"node":">=10.13.0"},"scripts":{"lint":"eslint .","lint:fix":"eslint . --fix","format":"prettier --write .","format:check":"prettier --check .","test":"jest","test:coverage":"jest --coverage","prepublishOnly":"npm run lint && npm test"},"repository":{"type":"git","url":"git+https://github.com/almothafar/webpack-inline-manifest-plugin.git"},"keywords":["webpack","webpack-plugin","webpack5","plugin","manifest","runtime","runtimeChunk","inline","html-webpack-plugin","webpack-inline-manifest-plugin"],"author":{"name":"Al-Mothafar Al-Hasan","email":"almothafar@gmail.com","url":"https://github.com/almothafar"},"license":"MIT","bugs":{"url":"https://github.com/almothafar/webpack-inline-manifest-plugin/issues"},"homepage":"https://github.com/almothafar/webpack-inline-manifest-plugin#readme","peerDependencies":{"html-webpack-plugin":"^5.0.0","webpack":"^5.20.0"},"devDependencies":{"@eslint/js":"^10.0.1","eslint":"^10.4.1","eslint-config-prettier":"^10.1.8","globals":"^17.6.0","html-webpack-plugin":"^5.6.7","jest":"^30.4.2","prettier":"^3.8.4","webpack":"^5.107.2"},"gitHead":"d861ef82fd48995a9ab78ba882b21f45f8f015ed","_id":"webpack-inline-manifest-plugin@5.0.0","_nodeVersion":"24.16.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-SrNHViJnQ+Qn7N4x/AUGSJNEAROWEjz3DQqV7q80k1eNsIXfv8oY76cVlcrR5iWb/dMlNlLUeVdlGcr3iGcmfw==","shasum":"e9ad038250b67e868083e1a43bd8d789bef9bb5e","tarball":"https://registry.npmjs.org/webpack-inline-manifest-plugin/-/webpack-inline-manifest-plugin-5.0.0.tgz","fileCount":5,"unpackedSize":15460,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDDiRicjy3XlKet0hp7vR63OiJZ/3vNs2qXTsLmkZ8GRAIgNsKowGHr5V4UxuIf18/eZSJI1Cieyu0VWQJl2E0qVEU="}]},"_npmUser":{"name":"almothafar","email":"almothafar@gmail.com"},"directories":{},"maintainers":[{"name":"almothafar","email":"almothafar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/webpack-inline-manifest-plugin_5.0.0_1781196209641_0.144770553218333"},"_hasShrinkwrap":false}},"time":{"created":"2018-03-15T09:35:54.572Z","modified":"2026-06-11T16:43:29.876Z","4.0.0":"2018-03-15T09:35:54.657Z","4.0.1":"2018-03-22T18:02:54.459Z","5.0.0":"2026-06-11T16:43:29.781Z"},"bugs":{"url":"https://github.com/almothafar/webpack-inline-manifest-plugin/issues"},"author":{"name":"Al-Mothafar Al-Hasan","email":"almothafar@gmail.com","url":"https://github.com/almothafar"},"license":"MIT","homepage":"https://github.com/almothafar/webpack-inline-manifest-plugin#readme","keywords":["webpack","webpack-plugin","webpack5","plugin","manifest","runtime","runtimeChunk","inline","html-webpack-plugin","webpack-inline-manifest-plugin"],"repository":{"type":"git","url":"git+https://github.com/almothafar/webpack-inline-manifest-plugin.git"},"description":"Inline the webpack runtime/manifest chunk with a <script> tag to save an HTTP request.","maintainers":[{"name":"almothafar","email":"almothafar@gmail.com"}],"readme":"# Webpack Inline Manifest Plugin\n\n[![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)\n\nA [webpack](https://webpack.js.org/) plugin that **inlines the runtime/manifest chunk** with a `<script>` tag, saving one render-blocking HTTP request.\n\nwebpack'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.\n\n## Requirements\n\n| webpack-inline-manifest-plugin | webpack | html-webpack-plugin | Node.js  |\n| ------------------------------ | ------- | ------------------- | -------- |\n| **5.x** (this version)         | 5       | 5                   | >= 10.13 |\n| 4.x                            | 4       | 3                   | >= 8     |\n\n> 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).\n\n## Installation\n\n```shell\nnpm install webpack-inline-manifest-plugin --save-dev\n```\n\n`webpack` and `html-webpack-plugin` are peer dependencies — you almost certainly already have them. The plugin itself has **no runtime dependencies**.\n\n## Usage\n\n### Step 1 — split out the runtime chunk\n\n```js\n// webpack.config.js\nmodule.exports = {\n  optimization: {\n    // The chunk name must match the plugin's `name` option below.\n    runtimeChunk: { name: 'webpackManifest' },\n  },\n};\n```\n\n> Using `runtimeChunk: 'single'` instead? That names the chunk `runtime`, so set the\n> plugin's `name` option to `'runtime'`.\n\n### Step 2 & 3 — add the plugins\n\nAdd `WebpackInlineManifestPlugin` **after** `HtmlWebpackPlugin`:\n\n```js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst WebpackInlineManifestPlugin = require('webpack-inline-manifest-plugin');\n\nmodule.exports = {\n  // ...\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new WebpackInlineManifestPlugin({\n      name: 'webpackManifest', // must equal the runtimeChunk name (default: 'webpackManifest')\n    }),\n  ],\n};\n```\n\nThat's it. With html-webpack-plugin's default `inject: true`, the plugin finds the\nexternal `<script src=\"webpackManifest.js\">` tag and **replaces it inline, in place** —\nso load order is preserved and nothing else in your template needs to change.\n\n### Manual placement (template mode)\n\nIf you render your own template with `inject: false`, the inline `<script>` is exposed\nas `htmlWebpackPlugin.files[name]` so you can place it wherever you like:\n\n```js\nnew HtmlWebpackPlugin({\n  inject: false,\n  template: 'src/index.ejs',\n});\n```\n\n```html\n<!-- src/index.ejs -->\n<!doctype html>\n<html>\n  <head>\n    <meta charset=\"UTF-8\" />\n    <title>App</title>\n  </head>\n  <body>\n    <%= htmlWebpackPlugin.files.webpackManifest %>\n  </body>\n</html>\n```\n\n## Options\n\n| Option | Type     | Default             | Description                                                                                                                                                                                                                                          |\n| ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `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). |\n\n## How it works\n\n- **`inject: true`** (default): taps html-webpack-plugin's `alterAssetTagGroups` hook\n  and swaps the runtime's `<script src>` tag for an inline `<script>` containing its\n  code. `nonce` / `type` attributes are preserved (handy for CSP), while `src` / `defer`\n  / `async` are dropped.\n- **`inject: false`**: taps `beforeAssetTagGeneration`, removes the runtime from the\n  external asset list, and exposes the inline markup as `htmlWebpackPlugin.files[name]`.\n- A trailing `//# sourceMappingURL=` comment is stripped from the inlined code, and the\n  asset source is normalised with `.toString()` so it works for production builds where\n  webpack emits a `Buffer` (`RawSource`) instead of a string.\n\nThe runtime chunk file is still emitted to your output directory (unreferenced); leaving\nit in place avoids breaking external references and service-worker precaches.\n\n## Alternatives\n\nThis optimization matters less than it did under HTTP/1.1 (HTTP/2+ multiplexes small\nrequests cheaply), and inline scripts require `'unsafe-inline'` or a nonce/hash under a\nstrict Content-Security-Policy. If this plugin's runtime-specific, zero-config approach\n(and its template-variable mode) isn't what you need, these maintained, general-purpose\noptions inline scripts on webpack 5 too:\n\n- [**html-inline-script-webpack-plugin**](https://github.com/icelam/html-inline-script-webpack-plugin)\n  — inline any script by filename, e.g. `scriptMatchPattern: [/runtime.*\\.js$/]`.\n- **`InlineChunkHtmlPlugin`** from `react-dev-utils` (used by the now-deprecated Create\n  React App) — same `alterAssetTagGroups` technique.\n\n## Migration from v4\n\n- **Requires webpack 5 + html-webpack-plugin 5.** This is the fix for the\n  `Cannot read property 'tapAsync' of undefined` crash on html-webpack-plugin v4+\n  ([#27](https://github.com/szrenwei/inline-manifest-webpack-plugin/issues/27),\n  [#23](https://github.com/szrenwei/inline-manifest-webpack-plugin/issues/23)).\n- **Automatic injection now works with `inject: true`.** In v4 you had to use a template\n  variable; now the runtime is inlined for you. The `htmlWebpackPlugin.files[name]`\n  variable still works with `inject: false`.\n- **The chunk lookup now honors `name`.** v4 hard-coded a lookup for a chunk literally\n  named `manifest`; v5 finds the chunk named by your `name` option. Make sure `name`\n  matches your `optimization.runtimeChunk` name.\n- **TypeScript types are bundled** (`index.d.ts`).\n\n## License\n\n[MIT](LICENSE)\n","readmeFilename":"README.md"}