Add a test and documentation for generating multiple HTML files

README.md

@@ -77,6 +77,27 @@ Here's an example webpack config illustrating how to use these options:
 }
 ```
 
+Generating Multiple HTML Files
+------------------------------
+To generate more than one HTML file, declare the plugin more than
+once in your plugins array:
+```javascript
+{
+  entry: 'index.js',
+  output: {
+    path: 'dist',
+    filename: 'index_bundle.js'
+  },
+  plugins: [
+    new HtmlWebpackPlugin(), // Generates default index.html
+    new HtmlWebpackPlugin({  // Also generate a test.html
+      filename: 'test.html',
+      template: 'src/assets/test.html'
+    })
+  ]
+}
+```
+
 Writing Your Own Templates
 --------------------------
 If the default generated HTML doesn't meet your needs you can supply
@@ -100,7 +121,7 @@ HTML as well as the body. Your template might look like this:
 </html>
 ```
 
-To use this template, simply configure the plugin like this:
+To use this template, configure the plugin like this:
 ```javascript
 {
   entry: 'index.js',

spec/HtmlWebpackPluginSpec.js

@@ -4,7 +4,7 @@ var webpack = require('webpack');
 var rm_rf = require('rimraf');
 var HtmlWebpackPlugin = require('../index.js');
 
-var OUTPUT_DIR = path.join(__dirname, '..', 'dist');
+var OUTPUT_DIR = path.join(__dirname, '../dist');
 
 function testHtmlPlugin(webpackConfig, expectedResults, done, outputFile) {
   outputFile = outputFile || 'index.html';
@@ -31,7 +31,7 @@ describe('HtmlWebpackPlugin', function() {
 
   it('generates a default index.html file for a single entry point', function(done) {
     testHtmlPlugin({
-      entry: path.join(__dirname, 'fixtures', 'index.js'),
+      entry: path.join(__dirname, 'fixtures/index.js'),
       output: {
         path: OUTPUT_DIR,
         filename: 'index_bundle.js'
@@ -44,8 +44,8 @@ describe('HtmlWebpackPlugin', function() {
   it('generates a default index.html file with multiple entry points', function(done) {
     testHtmlPlugin({
       entry: {
-        util: path.join(__dirname, 'fixtures', 'util.js'),
-        app: path.join(__dirname, 'fixtures', 'index.js')
+        util: path.join(__dirname, 'fixtures/util.js'),
+        app: path.join(__dirname, 'fixtures/index.js')
       },
       output: {
         path: OUTPUT_DIR,
@@ -58,13 +58,13 @@ describe('HtmlWebpackPlugin', function() {
   it('allows you to specify your own HTML template', function(done) {
     testHtmlPlugin({
       entry: {
-        app: path.join(__dirname, 'fixtures', 'index.js')
+        app: path.join(__dirname, 'fixtures/index.js')
       },
       output: {
         path: OUTPUT_DIR,
         filename: '[name]_bundle.js'
       },
-      plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'fixtures', 'test.html')})]
+      plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'fixtures/test.html')})]
     },
     ['<script src="app_bundle.js"', 'Some unique text'], done);
   });
@@ -72,7 +72,7 @@ describe('HtmlWebpackPlugin', function() {
   it('works with source maps', function(done) {
     testHtmlPlugin({
       devtool: 'sourcemap',
-      entry: path.join(__dirname, 'fixtures', 'index.js'),
+      entry: path.join(__dirname, 'fixtures/index.js'),
       output: {
         path: OUTPUT_DIR,
         filename: 'index_bundle.js'
@@ -83,7 +83,7 @@ describe('HtmlWebpackPlugin', function() {
 
   it('handles hashes in bundle filenames', function(done) {
     testHtmlPlugin({
-      entry: path.join(__dirname, 'fixtures', 'index.js'),
+      entry: path.join(__dirname, 'fixtures/index.js'),
       output: {
         path: OUTPUT_DIR,
         filename: 'index_bundle_[hash].js'
@@ -94,7 +94,7 @@ describe('HtmlWebpackPlugin', function() {
 
   it('prepends the webpack public path to script src', function(done) {
     testHtmlPlugin({
-      entry: path.join(__dirname, 'fixtures', 'index.js'),
+      entry: path.join(__dirname, 'fixtures/index.js'),
       output: {
         path: OUTPUT_DIR,
         filename: 'index_bundle.js',
@@ -106,7 +106,7 @@ describe('HtmlWebpackPlugin', function() {
 
   it('handles subdirectories in the webpack output bundles', function(done) {
     testHtmlPlugin({
-      entry: path.join(__dirname, 'fixtures', 'index.js'),
+      entry: path.join(__dirname, 'fixtures/index.js'),
       output: {
         path: OUTPUT_DIR,
         filename: 'assets/index_bundle.js'
@@ -117,7 +117,7 @@ describe('HtmlWebpackPlugin', function() {
 
   it('handles subdirectories in the webpack output bundles along with a public path', function(done) {
     testHtmlPlugin({
-      entry: path.join(__dirname, 'fixtures', 'index.js'),
+      entry: path.join(__dirname, 'fixtures/index.js'),
       output: {
         path: OUTPUT_DIR,
         filename: 'assets/index_bundle.js',
@@ -129,7 +129,7 @@ describe('HtmlWebpackPlugin', function() {
 
   it('allows you to configure the title of the generated HTML page', function(done) {
     testHtmlPlugin({
-      entry: path.join(__dirname, 'fixtures', 'index.js'),
+      entry: path.join(__dirname, 'fixtures/index.js'),
       output: {
         path: OUTPUT_DIR,
         filename: 'index_bundle.js'
@@ -140,7 +140,7 @@ describe('HtmlWebpackPlugin', function() {
 
   it('allows you to configure the output filename', function(done) {
     testHtmlPlugin({
-      entry: path.join(__dirname, 'fixtures', 'index.js'),
+      entry: path.join(__dirname, 'fixtures/index.js'),
       output: {
         path: OUTPUT_DIR,
         filename: 'index_bundle.js'
@@ -151,7 +151,7 @@ describe('HtmlWebpackPlugin', function() {
 
   it('allows you to configure the output filename with a path', function(done) {
     testHtmlPlugin({
-      entry: path.join(__dirname, 'fixtures', 'index.js'),
+      entry: path.join(__dirname, 'fixtures/index.js'),
       output: {
         path: OUTPUT_DIR,
         filename: 'index_bundle.js'
@@ -160,4 +160,23 @@ describe('HtmlWebpackPlugin', function() {
     }, ['<script src="index_bundle.js"'], done, 'assets/test.html');
   });
 
+  it('allows you write multiple HTML files', function(done) {
+    testHtmlPlugin({
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js'
+      },
+      plugins: [
+        new HtmlWebpackPlugin(),
+        new HtmlWebpackPlugin({
+          filename: 'test.html',
+          template: path.join(__dirname, 'fixtures/test.html')
+        })
+      ]
+    }, ['<script src="index_bundle.js"'], done);
+
+    expect(fs.existsSync(path.join(__dirname, 'fixtures/test.html'))).toBe(true);
+  });
+
 });

spec/fixtures/test.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
-    <title>React Starter</title>
+    <title>Test</title>
   </head>
   <body>
     <p>Some unique text</p>