feat(options): support htmlWebpackPlugin options & replace [name] in … (

#34) * feat(options): support htmlWebpackPlugin options & replace [name] in path * fix: add test case for html-webpack-plugin options
zorigitano · Jul 7, 2017 · 78bdb91 · 78bdb91
1 parent 08eeb6c
commit 78bdb91
Show file tree

Hide file tree

Showing 11 changed files with 145 additions and 7 deletions.
diff --git a/dist/src/plugin.js b/dist/src/plugin.js
@@ -19,7 +19,8 @@ function setPluginOptions(pluginOptions) {
       bootstrapFilename = pluginOptions.bootstrapFilename,
       templateFilename = pluginOptions.templateFilename,
       templatePath = pluginOptions.templatePath,
-      htmlTemplatePath = pluginOptions.htmlTemplatePath;
+      htmlTemplatePath = pluginOptions.htmlTemplatePath,
+      htmlWebpackPluginOptions = pluginOptions.htmlWebpackPluginOptions;
 
 
   return {
@@ -29,7 +30,8 @@ function setPluginOptions(pluginOptions) {
     bootstrapFilename: bootstrapFilename || 'inline.chunk.js',
     templateFilename: templateFilename || 'index.html',
     templatePath: templatePath || 'templates/[name]',
-    htmlTemplatePath: htmlTemplatePath || undefined
+    htmlTemplatePath: htmlTemplatePath || undefined,
+    htmlWebpackPluginOptions: htmlWebpackPluginOptions || {}
   };
 }
 
@@ -75,10 +77,10 @@ var MultipageWebpackPlugin = function () {
         };
 
         if (typeof _this.htmlTemplatePath !== "undefined") {
-          htmlWebpackPluginOptions.template = _this.htmlTemplatePath;
+          htmlWebpackPluginOptions.template = _this.htmlTemplatePath.replace(TEMPLATED_PATH_REGEXP_NAME, "" + entryKey);
         }
 
-        compiler.apply(new HtmlWebpackPlugin(htmlWebpackPluginOptions));
+        compiler.apply(new HtmlWebpackPlugin(Object.assign({}, _this.htmlWebpackPluginOptions, htmlWebpackPluginOptions)));
       });
 
       compiler.apply(new webpack.optimize.CommonsChunkPlugin({

diff --git a/examples/html-webpack-plugin-options/html-templates/a.html b/examples/html-webpack-plugin-options/html-templates/a.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title>title for a.html</title>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/examples/html-webpack-plugin-options/html-templates/b.html b/examples/html-webpack-plugin-options/html-templates/b.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title>title for b.html</title>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/examples/html-webpack-plugin-options/html-templates/c.html b/examples/html-webpack-plugin-options/html-templates/c.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title>title for c.html</title>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/examples/html-webpack-plugin-options/src/a/a.js b/examples/html-webpack-plugin-options/src/a/a.js
@@ -0,0 +1 @@
+console.log("Module A");
diff --git a/examples/html-webpack-plugin-options/src/b/b.js b/examples/html-webpack-plugin-options/src/b/b.js
@@ -0,0 +1 @@
+console.log("Module B");
diff --git a/examples/html-webpack-plugin-options/src/c/c.js b/examples/html-webpack-plugin-options/src/c/c.js
@@ -0,0 +1 @@
+console.log("Module C");
diff --git a/examples/html-webpack-plugin-options/static/favicon.ico b/examples/html-webpack-plugin-options/static/favicon.ico
diff --git a/examples/html-webpack-plugin-options/webpack.config.js b/examples/html-webpack-plugin-options/webpack.config.js
@@ -0,0 +1,37 @@
+const path = require('path');
+const webpack = require('webpack');
+const MultipageWebpackPlugin = require('../../src/plugin.js');
+
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
+
+let config = {
+  context: __dirname,
+  entry: {
+    a: './src/a/a.js',
+    b: './src/b/b.js',
+    c: './src/c/c.js'
+  },
+  output: {
+    filename: '[name].chunk.js',
+    path: resolve('./dist')
+  },
+  plugins: [
+    new MultipageWebpackPlugin({
+      // replace [name] in template path
+      htmlTemplatePath: resolve('./html-templates/[name].html'),
+      // some other options in htmlWebpackPlugin
+      htmlWebpackPluginOptions: {
+        minify: {
+          removeComments: true,
+          collapseWhitespace: true,
+          removeAttributeQuotes: true
+        },
+        favicon: resolve('./static/favicon.ico')
+      }
+    })
+  ]
+};
+
+module.exports = config;
diff --git a/src/plugin.js b/src/plugin.js
@@ -13,6 +13,7 @@ function setPluginOptions (pluginOptions) {
     templateFilename,
     templatePath,
     htmlTemplatePath,
+    htmlWebpackPluginOptions
   } = pluginOptions
 
   return {
@@ -22,7 +23,8 @@ function setPluginOptions (pluginOptions) {
     bootstrapFilename: bootstrapFilename || 'inline.chunk.js',
     templateFilename: templateFilename || 'index.html',
     templatePath: templatePath || 'templates/[name]',
-    htmlTemplatePath: htmlTemplatePath || undefined
+    htmlTemplatePath: htmlTemplatePath || undefined,
+    htmlWebpackPluginOptions: htmlWebpackPluginOptions || {}
   };
 }
 
@@ -55,11 +57,11 @@ class MultipageWebpackPlugin {
       };
 
       if (typeof this.htmlTemplatePath !== "undefined") {
-        htmlWebpackPluginOptions.template = this.htmlTemplatePath;
+        htmlWebpackPluginOptions.template = this.htmlTemplatePath.replace(TEMPLATED_PATH_REGEXP_NAME, `${entryKey}`);
       }
 
       compiler.apply(
-        new HtmlWebpackPlugin(htmlWebpackPluginOptions)
+        new HtmlWebpackPlugin(Object.assign({}, this.htmlWebpackPluginOptions, htmlWebpackPluginOptions))
       );
     });
 

diff --git a/test/html-webpack-plugin-options.test.js b/test/html-webpack-plugin-options.test.js
@@ -0,0 +1,67 @@
+import * as path from 'path';
+import Promise from 'bluebird';
+import test from 'ava';
+import {
+  runWebpackCompilerMemoryFs, 
+  getEntryKeysFromStats,  
+  testFs
+} from './utils.js';
+
+const simpleConfig = require('../examples/html-webpack-plugin-options/webpack.config.js');
+const fs = testFs; // Use shared memoryfs instance
+
+const simpleExamplePath = path.resolve(__dirname, '../examples/html-webpack-plugin-options');
+const webpackBuildPath = path.resolve(simpleExamplePath, './dist');
+
+// Convienence to use async await with these common fs functions
+const readdir = Promise.promisify(fs.readdir, {context: fs});
+const readFile = Promise.promisify(fs.readFile, {context: fs});
+const fsReaddir = Promise.promisify(fs.readdir, {context: fs});
+const fsReadFile = Promise.promisify(fs.readFile, {context: fs});
+const fsStat = Promise.promisify(fs.stat, {context: fs});
+const fsExists = Promise.promisify(fs.exists, {context: fs});
+
+
+let webpackBuildStats = null;
+
+test.before('run webpack build first', async t => {
+  webpackBuildStats = await runWebpackCompilerMemoryFs(simpleConfig);
+});
+
+// Run
+test('it should run successfully', async t => {
+  let {stats, warnings, errors} = webpackBuildStats;
+
+  t.falsy(stats.hasWarnings() && errors.hasWarnings());
+});
+
+// Test some htmlWebpackPlugin options
+test('each template should use options of htmlWebpackPlugin correctly', async t => {
+  const stats = webpackBuildStats.stats;
+  let entries = await getEntryKeysFromStats(stats);
+
+  // test minify option
+  let allTemplatesMinified = true;
+  // test favicon option
+  let faviconAdded = true;
+
+  for(let entryName of entries) {
+    let templateContent = await readFile(path.join(webpackBuildPath, "templates", entryName, "index.html"));
+    templateContent = templateContent.toString();
+
+    // whitespaces between tags have been collapsed
+    if (/>\s</.test(templateContent)) {
+      allTemplatesMinified = false;
+      break;
+    }
+
+    // favicon has been added
+    if (!/\<link rel=\"shortcut icon\" href=favicon\.ico\>/.test(templateContent)) {
+      faviconAdded = false;
+      break;
+    }
+  }
+
+  t.true(allTemplatesMinified);
+  t.true(faviconAdded);
+});