# inline-chunk-manifest-html-webpack-plugin

> Extension plugin for html-webpack-plugin to inline webpack chunk manifest. Default inlines in head tag.

Latest version **2.0.0** (published 2017-10-28) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2017-10-28 |
| First published | 2017-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 81 |
| Author | Jouni Kantola |
| Maintainers | jouni-kantola |
| Keywords | webpack, manifest |

## Links

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

## Dependencies (1)

- [webpack-sources](https://npm.io/package/webpack-sources.md) ^1.0.1

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2017-10-28
- 1.1.1 — 2017-04-21
- 1.1.0 — 2017-04-19
- 1.0.0 — 2017-04-17
- 0.2.1 — 2017-04-08
- 0.2.0 — 2017-04-04
- 0.1.0 — 2017-03-01

## README

# Inline Chunk Manifest HTML Webpack Plugin
Extension plugin for [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) to inline webpack's chunk manifest. Defaults to inline in `<head>` tag.

[![Build Status](https://travis-ci.org/jouni-kantola/inline-chunk-manifest-html-webpack-plugin.svg?branch=master)](https://travis-ci.org/jouni-kantola/inline-chunk-manifest-html-webpack-plugin)

## Example output
Script tag to assign global webpack manifest variable, injected in `<head>`.
```html
<head>
  <script>window.webpackManifest={"0":"0.bcca8d49c0f671a4afb6.dev.js","1":"1.6617d1b992b44b0996dc.dev.js"}</script>
</head>
```

## Usage

### Install via npm/yarn
- `npm install inline-chunk-manifest-html-webpack-plugin --save-dev`
- `yarn add inline-chunk-manifest-html-webpack-plugin --dev`

### webpack.config.js
```javascript
const InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin');

module.exports = {
  // your config values here
  plugins: [
    new HtmlWebpackPlugin({
        template: './index-template.ejs'
    }),
    // InlineChunkManifestHtmlWebpackPlugin defaults to:
    // { filename: 'manifest.json', manifestVariable: 'webpackManifest', chunkManifestVariable: 'webpackChunkManifest', dropAsset: false }
    new InlineChunkManifestHtmlWebpackPlugin()
  ]
};
```

### Config
```javascript
const inlineChunkManifestConfig = {
  filename: 'manifest.json', // manifest.json is default
  manifestVariable: 'webpackManifest', // webpackManifest is default
  chunkManifestVariable: 'webpackChunkManifest', // webpackChunkManifest is default; use in html-webpack-plugin template
  dropAsset: true, // false is default; use to skip output of the chunk manifest asset (removes manifest.json)
  manifestPlugins: [/* override default chunk manifest plugin(s) */],
  extractManifest: false // true is default. When set to false, manifestPlugins (incl default) is not applied
};

new InlineChunkManifestHtmlWebpackPlugin(inlineChunkManifestConfig)
```

### Explicit inject
When option `inject: false` is passed to `html-webpack-plugin` the content of the chunk manifest can be inlined matching the config option `chunkManifestVariable`.

Example template for `html-webpack-plugin`:
```html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <h1>My web site</h1>
    <%=htmlWebpackPlugin.files.webpackChunkManifest%>
  </body>
</html>
```

### Override default chunk manifest plugin
To use plugins like [webpack-manifest-plugin](https://github.com/danethurber/webpack-manifest-plugin) you can override the default plugin used to extract the webpack chunk manifest. To do this, you can do either of below configs:

`inline-chunk-manifest-html-webpack-plugin` apply dependency plugins:
```javascript
const InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin');

module.exports = {
  /* webpack config */
  plugins: [
    /* more plugins goes here */

    new InlineChunkManifestHtmlWebpackPlugin({
      manifestPlugins: [
        new WebpackManifestPlugin()
      ],
      manifestVariable: "manifest"
    }),
    new HtmlWebpackPlugin({
        template: './index-template.ejs'
    })
    /* more plugins goes here */
  ]
};
```

Plugins applied separately:
```javascript
const InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin');

module.exports = {
  /* webpack config */
  plugins: [
    /* more plugins goes here */
    new WebpackManifestPlugin(),
    new InlineChunkManifestHtmlWebpackPlugin({
      manifestVariable: "manifest",
      extractManifest: false
    }),
    new HtmlWebpackPlugin({
        template: './index-template.ejs'
    })
    /* more plugins goes here */
  ]
};
```

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