Reordered instructions

jouni-kantola · Apr 4, 2017 · b05ef5f · b05ef5f
1 parent 9cb410a
commit b05ef5f
Showing 1 changed file with 30 additions and 26 deletions.
diff --git 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 `<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>
@@ -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
@@ -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()
-  ]
-};
-```