# 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 `` tag.
[](https://travis-ci.org/jouni-kantola/inline-chunk-manifest-html-webpack-plugin)
## Example output
Script tag to assign global webpack manifest variable, injected in ``.
```html
```
## 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
<%= htmlWebpackPlugin.options.title %>
My web site
<%=htmlWebpackPlugin.files.webpackChunkManifest%>
```
### 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 */
]
};
```