diff --git a/README.md b/README.md index 60a4000..70de36d 100644 --- a/README.md +++ b/README.md @@ -65,11 +65,13 @@ Allowed values are as follows: You can specify a subdirectory here too (eg: `assets/admin.html`). - `template`: A html template (supports [blueimp templates](https://github.com/blueimp/JavaScript-Templates)). - `templateContent`: A html string or a function returning the html (supports [blueimp templates](https://github.com/blueimp/JavaScript-Templates)). -- `inject`: Inject all assets into the given `template` or `templateContent`. +- `inject`: `true | 'head' | 'body' | false` Inject all assets into the given `template` or `templateContent` - When passing `true` or `'body'` all javascript resources will be placed at the bottom of the body element. `'head'` will place the scripts in the head element. - `favicon`: Adds the given favicon path to the output html. -- `minify`: Set to true or pass a [html-minifier](https://github.com/kangax/html-minifier#options-quick-reference) options object to minify the output. -- `hash`: if `true` then append a unique webpack compilation hash to all +- `minify`: `true | {...} | false` Set to true or pass a [html-minifier](https://github.com/kangax/html-minifier#options-quick-reference) options object to minify the output. +- `hash`: `true | false` if `true` then append a unique webpack compilation hash to all included scripts and css files. This is useful for cache busting. +- `chunks`: Allows you to add only some chunks (e.g. only the unit-test chunk) +- `excludeChunks`: Allows you to skip some chunks (e.g. don't add the unit-test chunk) Here's an example webpack config illustrating how to use these options: ```javascript diff --git a/index.js b/index.js index 05fdad7..e940633 100644 --- a/index.js +++ b/index.js @@ -273,18 +273,30 @@ HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, templateParams styles = styles.map(function(stylePath) { return ''; }); - // If there is a favicon present, add it above any link-tags + // Injections + var head = []; + var body = []; + + // If there is a favicon present, add it to the head if (assets.favicon) { - styles.unshift(''); + head.push(''); } - // Append scripts to body element - html = html.replace(/(<\/body>)/i, function (match) { - return scripts.join('') + match; - }); - // Append styles to head element + // Add styles to the head + head = head.concat(styles); + // Add scripts to body or head + if (this.options.inject === 'head') { + head = body.concat(scripts); + } else { + body = body.concat(scripts); + } + // Append assets to head element html = html.replace(/(<\/head>)/i, function (match) { - return styles.join('') + match; + return head.join('') + match; }); + // Append assets to body element + html = html.replace(/(<\/body>)/i, function (match) { + return body.join('') + match; + }); // Inject manifest into the opening html tag if (assets.manifest) { html = html.replace(/()/i, function (match, start, end) { diff --git a/spec/HtmlWebpackPluginSpec.js b/spec/HtmlWebpackPluginSpec.js index 75ec141..105ce1f 100644 --- a/spec/HtmlWebpackPluginSpec.js +++ b/spec/HtmlWebpackPluginSpec.js @@ -113,6 +113,40 @@ describe('HtmlWebpackPlugin', function() { }, ['