Merge pull request #14 from jantimon/master

Support for .css and .manifest files and cache busting

.jshintrc

@@ -0,0 +1,93 @@
+{
+    // From JSHint Default Configuration File
+    // See http://jshint.com/docs/ for more details
+
+    "maxerr"        : 50,       // {int} Maximum error before stopping
+
+    // Enforcing
+    "bitwise"       : true,     // true: Prohibit bitwise operators (&, |, ^, etc.)
+    "camelcase"     : false,    // true: Identifiers must be in camelCase
+    "curly"         : true,     // true: Require {} for every new block or scope
+    "eqeqeq"        : true,     // true: Require triple equals (===) for comparison
+    "forin"         : false,    // true: Require filtering for..in loops with obj.hasOwnProperty()
+    "freeze"        : true,     // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
+    "immed"         : false,    // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
+    "indent"        : 2,        // {int} Number of spaces to use for indentation
+    "latedef"       : false,    // true: Require variables/functions to be defined before being used
+    "newcap"        : false,    // true: Require capitalization of all constructor functions e.g. `new F()`
+    "noarg"         : true,     // true: Prohibit use of `arguments.caller` and `arguments.callee`
+    "noempty"       : true,     // true: Prohibit use of empty blocks
+    "nonbsp"        : true,     // true: Prohibit "non-breaking whitespace" characters.
+    "nonew"         : false,    // true: Prohibit use of constructors for side-effects (without assignment)
+    "plusplus"      : false,    // true: Prohibit use of `++` & `--`
+    "quotmark"      : false,    // Quotation mark consistency:
+                                //   false    : do nothing (default)
+                                //   true     : ensure whatever is used is consistent
+                                //   "single" : require single quotes
+                                //   "double" : require double quotes
+    "undef"         : true,     // true: Require all non-global variables to be declared (prevents global leaks)
+    "unused"        : true,     // true: Require all defined variables be used
+    "strict"        : true,     // true: Requires all functions run in ES5 Strict Mode
+    "maxparams"     : false,    // {int} Max number of formal params allowed per function
+    "maxdepth"      : false,    // {int} Max depth of nested blocks (within functions)
+    "maxstatements" : false,    // {int} Max number statements per function
+    "maxcomplexity" : false,    // {int} Max cyclomatic complexity per function
+    "maxlen"        : false,    // {int} Max number of characters per line
+
+    // Relaxing
+    "asi"           : false,     // true: Tolerate Automatic Semicolon Insertion (no semicolons)
+    "boss"          : false,     // true: Tolerate assignments where comparisons would be expected
+    "debug"         : false,     // true: Allow debugger statements e.g. browser breakpoints.
+    "eqnull"        : false,     // true: Tolerate use of `== null`
+    "es5"           : false,     // true: Allow ES5 syntax (ex: getters and setters)
+    "esnext"        : false,     // true: Allow ES.next (ES6) syntax (ex: `const`)
+    "moz"           : false,     // true: Allow Mozilla specific syntax (extends and overrides esnext features)
+                                 // (ex: `for each`, multiple try/catch, function expression…)
+    "evil"          : false,     // true: Tolerate use of `eval` and `new Function()`
+    "expr"          : false,     // true: Tolerate `ExpressionStatement` as Programs
+    "funcscope"     : false,     // true: Tolerate defining variables inside control statements
+    "globalstrict"  : false,     // true: Allow global "use strict" (also enables 'strict')
+    "iterator"      : false,     // true: Tolerate using the `__iterator__` property
+    "lastsemic"     : false,     // true: Tolerate omitting a semicolon for the last statement of a 1-line block
+    "laxbreak"      : false,     // true: Tolerate possibly unsafe line breakings
+    "laxcomma"      : false,     // true: Tolerate comma-first style coding
+    "loopfunc"      : true,      // true: Tolerate functions being defined in loops
+    "multistr"      : false,     // true: Tolerate multi-line strings
+    "noyield"       : false,     // true: Tolerate generator functions with no yield statement in them.
+    "notypeof"      : false,     // true: Tolerate invalid typeof operator values
+    "proto"         : false,     // true: Tolerate using the `__proto__` property
+    "scripturl"     : false,     // true: Tolerate script-targeted URLs
+    "shadow"        : false,     // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
+    "sub"           : false,     // true: Tolerate using `[]` notation when it can still be expressed in dot notation
+    "supernew"      : false,     // true: Tolerate `new function () { ... };` and `new Object;`
+    "validthis"     : false,     // true: Tolerate using this in a non-constructor function
+
+    // Environments
+    "browser"       : true,     // Web Browser (window, document, etc)
+    "browserify"    : false,    // Browserify (node.js code in the browser)
+    "couch"         : false,    // CouchDB
+    "devel"         : true,     // Development/debugging (alert, confirm, etc)
+    "dojo"          : false,    // Dojo Toolkit
+    "jasmine"       : false,    // Jasmine
+    "jquery"        : false,    // jQuery
+    "mocha"         : true,     // Mocha
+    "mootools"      : false,    // MooTools
+    "node"          : true,    // Node.js
+    "nonstandard"   : false,    // Widely adopted globals (escape, unescape, etc)
+    "prototypejs"   : false,    // Prototype and Scriptaculous
+    "qunit"         : false,    // QUnit
+    "rhino"         : false,    // Rhino
+    "shelljs"       : false,    // ShellJS
+    "worker"        : false,    // Web Workers
+    "wsh"           : false,    // Windows Scripting Host
+    "yui"           : false,    // Yahoo User Interface
+
+    // Custom Globals
+    "globals"       : {
+      // jasmine helpers
+      "expect": false,
+      "describe": false,
+      "beforeEach": false,
+      "it": false
+    }
+}

README.md

@@ -113,10 +113,10 @@ HTML as well as the body. Your template might look like this:
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
     <title>My App</title>
-    <script src="{%=o.htmlWebpackPlugin.assets.head%}"></script>
+    <script src="{%=o.htmlWebpackPlugin.files.chunks.head.entry%}"></script>
   </head>
   <body>
-    <script src="{%=o.htmlWebpackPlugin.assets.main%}"></script>
+    <script src="{%=o.htmlWebpackPlugin.files.chunks.main.entry%}"></script>
   </body>
 </html>
 ```
@@ -153,14 +153,24 @@ Note the plugin will throw an error if you specify both `template` _and_
 The `o` variable in the template is the data that is passed in when the
 template is rendered. This variable has the following attributes:
 - `htmlWebpackPlugin`: data specific to this plugin
-  - `htmlWebpackPlugin.assets`: a massaged representation of the
+  - `htmlWebpackPlugin.files`: a massaged representation of the
     `assetsByChunkName` attribute of webpack's [stats](https://github.com/webpack/docs/wiki/node.js-api#stats)
     object. It contains a mapping from entry point name to the bundle filename, eg:
     ```json
     "htmlWebpackPlugin": {
-      "assets": {
-        "head": "assets/head_bundle.js",
-        "main": "assets/main_bundle.js"
+      "files": {
+        "css": [ "main.css" ],
+        "js": [ "assets/head_bundle.js", "assets/main_bundle.js"]
+        "chunks": {
+          "head": {
+            "entry": "assets/head_bundle.js",
+            "css": [ "main.css" ]
+          },
+          "main": {
+            "entry": "assets/main_bundle.js",
+            "css": []
+          },
+        }
       }
     }
     ```

default_index.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html{% if(o.htmlWebpackPlugin.files.manifest) { %} manifest="{%= o.htmlWebpackPlugin.files.manifest + o.htmlWebpackPlugin.querystring %}"{% } %}>
   <head>
     <meta charset="UTF-8">
     <title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title>
+    {% for (var css in o.htmlWebpackPlugin.files.css) { %}
+    <link href="{%=o.htmlWebpackPlugin.files.css[css] + o.htmlWebpackPlugin.querystring %}" rel="stylesheet">
+    {% } %}
   </head>
   <body>
-    {% for (var chunk in o.htmlWebpackPlugin.assets) { %}
-    <script src="{%=o.htmlWebpackPlugin.assets[chunk]%}"></script>
+    {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
+    <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry + o.htmlWebpackPlugin.querystring %}"></script>
     {% } %}
   </body>
 </html>

index.js

@@ -1,3 +1,4 @@
+'use strict';
 var fs = require('fs');
 var path = require('path');
 var tmpl = require('blueimp-tmpl').tmpl;
@@ -8,44 +9,52 @@ function HtmlWebpackPlugin(options) {
 
 HtmlWebpackPlugin.prototype.apply = function(compiler) {
   var self = this;
-  compiler.plugin('emit', function(compiler, callback) {
-    var webpackStatsJson = compiler.getStats().toJson();
+  compiler.plugin('emit', function(compilation, callback) {
+    var webpackStatsJson = compilation.getStats().toJson();
     var templateParams = {};
     templateParams.webpack = webpackStatsJson;
     templateParams.htmlWebpackPlugin = {};
-    templateParams.htmlWebpackPlugin.assets = self.htmlWebpackPluginAssets(compiler, webpackStatsJson);
+    templateParams.htmlWebpackPlugin.assets = self.htmlWebpackPluginLegacyAssets(compilation, webpackStatsJson);
+    templateParams.htmlWebpackPlugin.files = self.htmlWebpackPluginAssets(compilation, webpackStatsJson);
     templateParams.htmlWebpackPlugin.options = self.options;
+    // If the hash option is true append the webpack hash to all assets
+    templateParams.htmlWebpackPlugin.querystring = self.options.hash ? '?' + webpackStatsJson.hash : '';
 
     var outputFilename = self.options.filename || 'index.html';
 
     if (self.options.templateContent && self.options.template) {
-      compiler.errors.push(new Error('HtmlWebpackPlugin: cannot specify both template and templateContent options'));
+      compilation.errors.push(new Error('HtmlWebpackPlugin: cannot specify both template and templateContent options'));
       callback();
     } else if (self.options.templateContent) {
-      self.emitHtml(compiler, self.options.templateContent, templateParams, outputFilename);
+      self.emitHtml(compilation, self.options.templateContent, templateParams, outputFilename);
       callback();
     } else {
       var templateFile = self.options.template;
       if (!templateFile) {
         templateFile = path.join(__dirname, 'default_index.html');
       }
-      compiler.fileDependencies.push(templateFile);
+      compilation.fileDependencies.push(templateFile);
 
       fs.readFile(templateFile, 'utf8', function(err, htmlTemplateContent) {
         if (err) {
-          compiler.errors.push(new Error('HtmlWebpackPlugin: Unable to read HTML template "' + templateFile + '"'));
+          compilation.errors.push(new Error('HtmlWebpackPlugin: Unable to read HTML template "' + templateFile + '"'));
         } else {
-          self.emitHtml(compiler, htmlTemplateContent, templateParams, outputFilename);
+          self.emitHtml(compilation, htmlTemplateContent, templateParams, outputFilename);
         }
         callback();
       });
     }
   });
 };
 
-HtmlWebpackPlugin.prototype.emitHtml = function(compiler, htmlTemplateContent, templateParams, outputFilename) {
-  var html = tmpl(htmlTemplateContent, templateParams);
-  compiler.assets[outputFilename] = {
+HtmlWebpackPlugin.prototype.emitHtml = function(compilation, htmlTemplateContent, templateParams, outputFilename) {
+  var html;
+  try {
+   html = tmpl(htmlTemplateContent, templateParams);
+  } catch(e) {
+    compilation.errors.push(new Error('HtmlWebpackPlugin: template error ' + e));
+  }
+  compilation.assets[outputFilename] = {
     source: function() {
       return html;
     },
@@ -55,24 +64,59 @@ HtmlWebpackPlugin.prototype.emitHtml = function(compiler, htmlTemplateContent, t
   };
 };
 
-HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compiler, webpackStatsJson) {
-  var assets = {};
+
+HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webpackStatsJson) {
+  var assets = {
+    // Will contain all js & css files by chunk
+    chunks: {},
+    // Will contain all js files
+    js: [],
+    // Will contain all css files
+    css: [],
+    // Will contain the html5 appcache manifest files if it exists
+    manifest: Object.keys(compilation.assets).filter(function(assetFile){
+      return path.extname(assetFile) === '.appcache';
+    })[0]
+  };
+  var publicPath = compilation.options.output.publicPath || '';
+
   for (var chunk in webpackStatsJson.assetsByChunkName) {
-    var chunkValue = webpackStatsJson.assetsByChunkName[chunk];
+    assets.chunks[chunk] = {};
+
+    // Prepend the public path to all chunk files
+    var chunkFiles = [].concat(webpackStatsJson.assetsByChunkName[chunk]).map(function(chunkFile) {
+      return publicPath + chunkFile;
+    });
 
     // Webpack outputs an array for each chunk when using sourcemaps
-    if (chunkValue instanceof Array) {
-      // Is the main bundle always the first element?
-      chunkValue = chunkValue[0];
-    }
+    // But we need only the entry file
+    var entry = chunkFiles[0];
+    assets.chunks[chunk].entry = entry;
+    assets.js.push(entry);
 
-    if (compiler.options.output.publicPath) {
-      chunkValue = compiler.options.output.publicPath + chunkValue;
-    }
-    assets[chunk] = chunkValue;
+    // Gather all css files
+    var css = chunkFiles.filter(function(chunkFile){
+      return path.extname(chunkFile) === '.css';
+    });
+    assets.chunks[chunk].css = css;
+    assets.css = assets.css.concat(css);
   }
 
   return assets;
 };
 
+/**
+ * A helper to support the templates written for html-webpack-plugin <= 1.1.0
+ */
+HtmlWebpackPlugin.prototype.htmlWebpackPluginLegacyAssets = function(compilation, webpackStatsJson) {
+  var assets = this.htmlWebpackPluginAssets(compilation, webpackStatsJson);
+  var legacyAssets = {};
+  Object.keys(assets.chunks).forEach(function(chunkName){
+    legacyAssets[chunkName] = assets.chunks[chunkName].entry;
+  });
+  return legacyAssets;
+};
+
+
+
 module.exports = HtmlWebpackPlugin;

package.json

@@ -4,7 +4,7 @@
   "description": "Simplifies creation of HTML files to serve your webpack bundles",
   "main": "index.js",
   "scripts": {
-    "test": "jshint *.js spec && jasmine-node --captureExceptions spec"
+    "test": "jshint -c .jshintrc *.js spec && jasmine-node --captureExceptions spec"
   },
   "repository": {
     "type": "git",

spec/HtmlWebpackPluginSpec.js

@@ -1,3 +1,4 @@
+'use strict';
 var path = require('path');
 var fs = require('fs');
 var webpack = require('webpack');
@@ -17,7 +18,7 @@ function testHtmlPlugin(webpackConfig, expectedResults, outputFile, done) {
       if (expectedResult instanceof RegExp) {
         expect(htmlContent).toMatch(expectedResult);
       } else {
-        expect(htmlContent).toContain(expectedResult);
+        expect(htmlContent).toContain(expectedResult.replace('%hash%', stats.hash));
       }
     }
     done();
@@ -66,7 +67,7 @@ describe('HtmlWebpackPlugin', function() {
       },
       plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'fixtures/test.html')})]
     },
-    ['<script src="app_bundle.js"', 'Some unique text'], null, done);
+    ['<script src="app_bundle.js', 'Some unique text'], null, done);
   });
 
   it('allows you to specify your own HTML template string', function(done) {
@@ -80,7 +81,35 @@ describe('HtmlWebpackPlugin', function() {
         templateContent: fs.readFileSync(path.join(__dirname, 'fixtures/test.html'), 'utf8')
       })]
     },
-    ['<script src="app_bundle.js"'], null, done);
+    ['<script src="app_bundle.js'], null, done);
+  });
+
+  it('allows you to use the deprecated assets object', function (done) {
+    testHtmlPlugin({
+        entry: {
+          app: path.join(__dirname, 'fixtures/index.js')
+        },
+        output: {
+          path: OUTPUT_DIR,
+          filename: '[name]_bundle.js'
+        },
+        plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'fixtures/legacy.html')})]
+      },
+      ['<script src="app_bundle.js', 'Some unique text'], null, done);
+  });
+
+  it('allows you to use the deprecated default_index file', function (done) {
+    testHtmlPlugin({
+        entry: {
+          app: path.join(__dirname, 'fixtures/index.js')
+        },
+        output: {
+          path: OUTPUT_DIR,
+          filename: '[name]_bundle.js'
+        },
+        plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'fixtures/legacy_default_index.html')})]
+      },
+      ['<script src="app_bundle.js'], null, done);
   });
 
   it('registers a webpack error both template and template content are specified', function(done) {
@@ -121,7 +150,18 @@ describe('HtmlWebpackPlugin', function() {
         filename: 'index_bundle_[hash].js'
       },
       plugins: [new HtmlWebpackPlugin()]
-    }, [/<script src="index_bundle_[0-9a-f]+\.js"/], null, done);
+    }, [/<script src="index_bundle_[0-9a-f]+\.js/], null, done);
+  });
+
+  it('allows to append hashes to the assets', function(done) {
+    testHtmlPlugin({
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js'
+      },
+      plugins: [new HtmlWebpackPlugin({hash: true})]
+    }, ['<script src="index_bundle.js?%hash%"'], null, done);
   });
 
   it('prepends the webpack public path to script src', function(done) {
@@ -194,7 +234,9 @@ describe('HtmlWebpackPlugin', function() {
 
   it('allows you write multiple HTML files', function(done) {
     testHtmlPlugin({
-      entry: path.join(__dirname, 'fixtures/index.js'),
+      entry: {
+        app: path.join(__dirname, 'fixtures/index.js')
+      },
       output: {
         path: OUTPUT_DIR,
         filename: 'index_bundle.js'