From b05ef5f0044788e2d098766f1e2f1b8d8aa3a7e8 Mon Sep 17 00:00:00 2001 From: Jouni Kantola Date: Tue, 4 Apr 2017 12:42:14 +0200 Subject: [PATCH] Reordered instructions --- README.md | 56 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 98ccfd0..fc7c5cc 100644 --- a/README.md +++ b/README.md @@ -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 ``. +Script tag to assign global webpack manifest variable, injected in ``. ```html @@ -17,21 +17,45 @@ Script tag assigning global variable injected in ``. - `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 @@ -48,23 +72,3 @@ Example template for `html-webpack-plugin`: ``` - -### 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() - ] -}; -```