html-webpack-plugin 2.19.0 → 2.22.0

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 Change History
 ==============
 
+v2.22.0
+---
+* Update dependencies
+
+v2.21.1
+---
+* Better error handling (#354)
+
+v2.21.0
+----
+* Add `html-webpack-plugin-alter-asset-tags` event to allow plugins to adjust the script/link tags
+
+v2.20.0
+----
+* Exclude chunks works now even if combined with dependency sort
+
 v2.19.0
 ----
 * Add `html-webpack-plugin-alter-chunks` event for custom chunk sorting and interpolation

package/README.md

@@ -1,6 +1,6 @@
 HTML Webpack Plugin
 ===================
-[![npm version](https://badge.fury.io/js/html-webpack-plugin.svg)](http://badge.fury.io/js/html-webpack-plugin) [![Dependency Status](https://david-dm.org/ampedandwired/html-webpack-plugin.svg)](https://david-dm.org/ampedandwired/html-webpack-plugin) [![Build status](https://travis-ci.org/ampedandwired/html-webpack-plugin.svg)](https://travis-ci.org/ampedandwired/html-webpack-plugin) [![Windows build status](https://ci.appveyor.com/api/projects/status/github/ampedandwired/html-webpack-plugin?svg=true&branch=master)](https://ci.appveyor.com/project/jantimon/html-webpack-plugin) [![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?style=flat-square)](https://github.com/Flet/semistandard) [![bitHound Dependencies](https://www.bithound.io/github/ampedandwired/html-webpack-plugin/badges/dependencies.svg)](https://www.bithound.io/github/ampedandwired/html-webpack-plugin/master/dependencies/npm)
+[![npm version](https://badge.fury.io/js/html-webpack-plugin.svg)](http://badge.fury.io/js/html-webpack-plugin) [![Dependency Status](https://david-dm.org/ampedandwired/html-webpack-plugin.svg)](https://david-dm.org/ampedandwired/html-webpack-plugin) [![Build status](https://travis-ci.org/ampedandwired/html-webpack-plugin.svg)](https://travis-ci.org/ampedandwired/html-webpack-plugin) [![Windows build status](https://ci.appveyor.com/api/projects/status/github/ampedandwired/html-webpack-plugin?svg=true&branch=master)](https://ci.appveyor.com/project/jantimon/html-webpack-plugin) [![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?style=flat-square)](https://github.com/Flet/semistandard) [![bitHound Dependencies](https://www.bithound.io/github/ampedandwired/html-webpack-plugin/badges/dependencies.svg)](https://www.bithound.io/github/ampedandwired/html-webpack-plugin/master/dependencies/npm) [![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)]()
 
 [![NPM](https://nodei.co/npm/html-webpack-plugin.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/html-webpack-plugin/)
 
@@ -24,8 +24,7 @@ Migration guide from 1.x
 [Changelog](https://github.com/ampedandwired/html-webpack-plugin/blob/master/CHANGELOG.md)
 
 If you used the 1.x version please take a look at the [migration guide](https://github.com/ampedandwired/html-webpack-plugin/blob/master/migration.md)
-In case I missed something please open a pull request for it.
-See also issue [#186](https://github.com/ampedandwired/html-webpack-plugin/issues/186)
+
 
 Basic Usage
 -----------
@@ -75,7 +74,7 @@ Allowed values are as follows:
 - `title`: The title to use for the generated HTML document.
 - `filename`: The file to write the HTML to. Defaults to `index.html`.
    You can specify a subdirectory here too (eg: `assets/admin.html`).
-- `template`: Path to the template. Supports loaders e.g. `html!./index.html`.
+- `template`: Webpack require path to the template. Please see the [docs](https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md) for details. 
 - `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`: `{...} | false` Pass a [html-minifier](https://github.com/kangax/html-minifier#options-quick-reference) options object to minify the output.
@@ -105,6 +104,13 @@ Here's an example webpack config illustrating how to use these options:
 }
 ```
 
+FAQ
+----
+
+* [Why is my html minified?](https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md)
+* [Why is my `<% ... %>` template not working?](https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md)
+* [How can I use handlebars/pug/ejs as template engine](https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md)
+
 Generating Multiple HTML Files
 ------------------------------
 To generate more than one HTML file, declare the plugin more than
@@ -137,8 +143,7 @@ and favicon files into the markup.
 plugins: [
   new HtmlWebpackPlugin({
     title: 'Custom template',
-    template: 'my-index.ejs', // Load a custom template (ejs by default but can be changed)
-    inject: 'body' // Inject all scripts into the body (this is the default so you can skip it)
+    template: 'my-index.ejs', // Load a custom template (ejs by default see the FAQ for details)
   })
 ]
 ```
@@ -244,14 +249,15 @@ Events
 
 To allow other [plugins](https://github.com/webpack/docs/wiki/plugins) to alter the html this plugin executes the following events:
 
-Asnyc:
+Async:
 
  * `html-webpack-plugin-before-html-generation`
  * `html-webpack-plugin-before-html-processing`
+ * `html-webpack-plugin-alter-asset-tags`
  * `html-webpack-plugin-after-html-processing`
  * `html-webpack-plugin-after-emit`
 
- Sync:
+Sync:
 
  * `html-webpack-plugin-alter-chunks`
 
@@ -290,3 +296,13 @@ plugins: [
 ```
 
 Note that the callback must be passed the htmlPluginData in order to pass this onto any other plugins listening on the same 'html-webpack-plugin-before-html-processing' event.
+
+
+# Contribution
+
+You're free to contribute to this project by submitting [issues](https://github.com/ampedandwired/html-webpack-plugin/issues) and/or [pull requests](https://github.com/ampedandwired/html-webpack-plugin/pulls). This project is test-driven, so keep in mind that every change and new feature should be covered by tests.
+This project uses the [semistandard code style](https://github.com/Flet/semistandard).
+
+# License
+
+This project is licensed under [MIT](https://github.com/ampedandwired/html-webpack-plugin/blob/master/LICENSE).

package/index.js

@@ -12,7 +12,7 @@ Promise.promisifyAll(fs);
 function HtmlWebpackPlugin (options) {
   // Default options
   this.options = _.extend({
-    template: __dirname + '/default_index.ejs',
+    template: path.join(__dirname, 'default_index.ejs'),
     filename: 'index.html',
     hash: false,
     inject: true,
@@ -143,8 +143,15 @@ HtmlWebpackPlugin.prototype.apply = function (compiler) {
           });
       })
       .then(function (html) {
-        // Add the stylesheets, scripts and so on to the resulting html
-        return self.postProcessHtml(html, assets);
+        // Prepare script and link tags
+        var assetTags = self.generateAssetTags(assets);
+        var pluginArgs = {head: assetTags.head, body: assetTags.body, plugin: self, chunks: chunks, outputName: self.childCompilationOutputName};
+        // Allow plugins to change the assetTag definitions
+        return applyPluginsAsyncWaterfall('html-webpack-plugin-alter-asset-tags', pluginArgs)
+          .then(function () {
+              // Add the stylesheets, scripts and so on to the resulting html
+            return self.postProcessHtml(html, assets, { body: pluginArgs.body, head: pluginArgs.head });
+          });
       })
       // Allow plugins to change the html after assets are injected
       .then(function (html) {
@@ -259,7 +266,7 @@ HtmlWebpackPlugin.prototype.executeTemplate = function (templateFunction, chunks
  *
  * Returns a promise
  */
-HtmlWebpackPlugin.prototype.postProcessHtml = function (html, assets) {
+HtmlWebpackPlugin.prototype.postProcessHtml = function (html, assets, assetTags) {
   var self = this;
   if (typeof html !== 'string') {
     return Promise.reject('Expected html to be a string but got ' + JSON.stringify(html));
@@ -268,7 +275,7 @@ HtmlWebpackPlugin.prototype.postProcessHtml = function (html, assets) {
     // Inject
     .then(function () {
       if (self.options.inject) {
-        return self.injectAssetsIntoHtml(html, assets);
+        return self.injectAssetsIntoHtml(html, assets, assetTags);
       } else {
         return html;
       }
@@ -449,27 +456,45 @@ HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function (compilation, chu
 /**
  * Injects the assets into the given html string
  */
-HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function (html, assets) {
+HtmlWebpackPlugin.prototype.generateAssetTags = function (assets) {
   // Turn script files into script tags
   var scripts = assets.js.map(function (scriptPath) {
-    return '<script type="text/javascript" src="' + scriptPath + '"></script>';
+    return {
+      tagName: 'script',
+      closeTag: true,
+      attributes: {
+        type: 'text/javascript',
+        src: scriptPath
+      }
+    };
   });
   // Make tags self-closing in case of xhtml
-  var xhtml = this.options.xhtml ? '/' : '';
+  var selfClosingTag = !!this.options.xhtml;
   // Turn css files into link tags
   var styles = assets.css.map(function (stylePath) {
-    return '<link href="' + stylePath + '" rel="stylesheet"' + xhtml + '>';
+    return {
+      tagName: 'link',
+      selfClosingTag: selfClosingTag,
+      attributes: {
+        href: stylePath,
+        rel: 'stylesheet'
+      }
+    };
   });
-  // Injections
-  var htmlRegExp = /(<html[^>]*>)/i;
+  // Injection targets
   var head = [];
-  var headRegExp = /(<\/head>)/i;
   var body = [];
-  var bodyRegExp = /(<\/body>)/i;
 
   // If there is a favicon present, add it to the head
   if (assets.favicon) {
-    head.push('<link rel="shortcut icon" href="' + assets.favicon + '"' + xhtml + '>');
+    head.push({
+      tagName: 'link',
+      selfClosingTag: selfClosingTag,
+      attributes: {
+        rel: 'shortcut icon',
+        href: assets.favicon
+      }
+    });
   }
   // Add styles to the head
   head = head.concat(styles);
@@ -479,6 +504,18 @@ HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function (html, assets) {
   } else {
     body = body.concat(scripts);
   }
+  return {head: head, body: body};
+};
+
+/**
+ * Injects the assets into the given html string
+ */
+HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function (html, assets, assetTags) {
+  var htmlRegExp = /(<html[^>]*>)/i;
+  var headRegExp = /(<\/head>)/i;
+  var bodyRegExp = /(<\/body>)/i;
+  var body = assetTags.body.map(this.createHtmlTag);
+  var head = assetTags.head.map(this.createHtmlTag);
 
   if (body.length) {
     if (bodyRegExp.test(html)) {
@@ -533,6 +570,18 @@ HtmlWebpackPlugin.prototype.appendHash = function (url, hash) {
   return url + (url.indexOf('?') === -1 ? '?' : '&') + hash;
 };
 
+/**
+ * Turn a tag definition into a html string
+ */
+HtmlWebpackPlugin.prototype.createHtmlTag = function (tagDefinition) {
+  var attributes = Object.keys(tagDefinition.attributes || {}).map(function (attributeName) {
+    return attributeName + '="' + tagDefinition.attributes[attributeName] + '"';
+  });
+  return '<' + [tagDefinition.tagName].concat(attributes).join(' ') + (tagDefinition.selfClosingTag ? '/' : '') + '>' +
+    (tagDefinition.innerHTML || '') +
+    (tagDefinition.closeTag ? '</' + tagDefinition.tagName + '>' : '');
+};
+
 /**
  * Helper to return the absolute template path with a fallback loader
  */
@@ -543,7 +592,7 @@ HtmlWebpackPlugin.prototype.getFullTemplatePath = function (template, context) {
   }
   // Resolve template path
   return template.replace(
-    /(\!)([^\/\\][^\!\?]+|[^\/\\!?])($|\?.+$)/,
+    /([!])([^\/\\][^!\?]+|[^\/\\!?])($|\?.+$)/,
     function (match, prefix, filepath, postfix) {
       return prefix + path.resolve(filepath) + postfix;
     });

package/lib/chunksorter.js

@@ -41,10 +41,11 @@ module.exports.dependency = function (chunks) {
       // Add an edge for each parent (parent -> child)
       chunk.parents.forEach(function (parentId) {
         var parentChunk = nodeMap[parentId];
-        if (!parentChunk) {
-          throw new Error('Can not find chunk parent during dependency sort');
+        // If the parent chunk does not exist (e.g. because of an excluded chunk)
+        // we ignore that parent
+        if (parentChunk) {
+          edges.push([parentChunk, chunk]);
         }
-        edges.push([parentChunk, chunk]);
       });
     }
   });

package/lib/compiler.js

@@ -68,18 +68,6 @@ module.exports.compileTemplate = function compileTemplate (template, context, ou
   // Compile and return a promise
   return new Promise(function (resolve, reject) {
     childCompiler.runAsChild(function (err, entries, childCompilation) {
-      // Replace [hash] placeholders in filename
-      var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
-        hash: childCompilation.hash,
-        chunk: entries[0]
-      });
-      // Restore the parent compilation to the state like it
-      // was before the child compilation
-      compilation.assets[outputName] = assetsBeforeCompilation[outputName];
-      if (assetsBeforeCompilation[outputName] === undefined) {
-        // If it wasn't there - delete it
-        delete compilation.assets[outputName];
-      }
       // Resolve / reject the promise
       if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
         var errorDetails = childCompilation.errors.map(function (error) {
@@ -89,6 +77,18 @@ module.exports.compileTemplate = function compileTemplate (template, context, ou
       } else if (err) {
         reject(err);
       } else {
+        // Replace [hash] placeholders in filename
+        var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
+          hash: childCompilation.hash,
+          chunk: entries[0]
+        });
+        // Restore the parent compilation to the state like it
+        // was before the child compilation
+        compilation.assets[outputName] = assetsBeforeCompilation[outputName];
+        if (assetsBeforeCompilation[outputName] === undefined) {
+          // If it wasn't there - delete it
+          delete compilation.assets[outputName];
+        }
         resolve({
           // Hash of the template entry point
           hash: entries[0].hash,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "2.19.0",
+  "version": "2.22.0",
   "description": "Simplifies creation of HTML files to serve your webpack bundles",
   "main": "index.js",
   "files": [
@@ -30,31 +30,39 @@
     "url": "https://github.com/ampedandwired/html-webpack-plugin/issues"
   },
   "homepage": "https://github.com/ampedandwired/html-webpack-plugin",
+  "semistandard": {
+    "ignore": [
+      "examples/*/dist/**/*.*"
+    ]
+  },
   "devDependencies": {
     "appcache-webpack-plugin": "^1.2.1",
     "css-loader": "^0.23.1",
     "dir-compare": "1.0.1",
     "es6-promise": "^3.2.1",
     "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.5",
+    "file-loader": "^0.9.0",
     "html-loader": "^0.4.3",
     "jade": "^1.11.0",
     "jade-loader": "^0.8.0",
     "jasmine": "^2.4.1",
     "rimraf": "^2.5.2",
-    "semistandard": "^7.0.5",
+    "semistandard": "^8.0.0",
     "style-loader": "^0.13.1",
     "underscore-template-loader": "^0.7.3",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.0",
+    "webpack": "^1.13.1",
     "webpack-recompilation-simulator": "^1.3.0"
   },
   "dependencies": {
-    "bluebird": "^3.3.5",
-    "html-minifier": "^2.1.3",
+    "bluebird": "^3.4.1",
+    "html-minifier": "^2.1.6",
     "loader-utils": "^0.2.15",
-    "lodash": "^4.12.0",
+    "lodash": "^4.13.1",
     "pretty-error": "^2.0.0",
     "toposort": "^1.0.0"
+  },
+  "peerDependencies": {
+    "webpack": "*"
   }
 }