Skip to content
This repository has been archived by the owner on Jun 8, 2022. It is now read-only.

Commit

Permalink
Reordered instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
jouni-kantola committed Apr 4, 2017
1 parent 9cb410a commit b05ef5f
Showing 1 changed file with 30 additions and 26 deletions.
56 changes: 30 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Extension plugin for `html-webpack-plugin` to inline webpack chunk manifest. Use
- `inline-manifest-webpack-plugin` to inline manifest (in contrast to chunk manifest, which this plugin does)

## Example output
Script tag assigning global variable injected in `<head>`.
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>
Expand All @@ -17,21 +17,45 @@ Script tag assigning global variable injected in `<head>`.
- `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 ChunkManifestPlugin(),
new HtmlWebpackPlugin({
template: './index-template.ejs'
}),
// InlineChunkManifestHtmlWebpackPlugin defaults to:
// { filename: 'manifest.json', manifestVariable: 'webpackManifest', chunkManifestVariable: 'webpackChunkManifest' }
// match { filename, manifestVariable } with ChunkManifestPlugin
new InlineChunkManifestHtmlWebpackPlugin(),
new InlineManifestPlugin()
]
};
```

### Config
```javascript
const inlineChunkManifestConfig = {
filename: 'manifest.json', // manifest.json is default and matches chunk-manifest-webpack-plugin
manifestVariable: 'webpackManifest', // webpackManifest is default and matches chunk-manifest-webpack-plugin
chunkManifestVariable: 'webpackChunkManifest' // output webpack chunk manifest, to be used in html-webpack-plugin template
filename: 'manifest.json', // manifest.json is default; matches chunk-manifest-webpack-plugin
manifestVariable: 'webpackManifest', // webpackManifest is default; matches chunk-manifest-webpack-plugin
chunkManifestVariable: 'webpackChunkManifest' // webpackChunkManifest is default; use in html-webpack-plugin template
};

new InlineChunkManifestHtmlWebpackPlugin(inlineChunkManifestConfig)
```

### Defaults
Default chunk manifest is inlined into the head tag.

By default the chunk manifest options matches defaults from [chunk-manifest-webpack-plugin](https://github.com/soundcloud/chunk-manifest-webpack-plugin).
If `filename` and/or `manifestFilename` is set for `ChunkManifestPlugin` match the config passed to `InlineChunkManifestHtmlWebpackPlugin`.
If `filename` and/or `manifestFilename` is set for `ChunkManifestPlugin` match the values for `InlineChunkManifestHtmlWebpackPlugin`.

Default chunk manifest is inlined into the head tag. When option `inject: false` is passed to `html-webpack-plugin` the content of the chunk manifest can be inlined matching the config option `chunkManifestVariable`.
### 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
Expand All @@ -48,23 +72,3 @@ Example template for `html-webpack-plugin`:
</body>
</html>
```

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

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

0 comments on commit b05ef5f

Please sign in to comment.