support using loader and image in html

Author: lcxfs1991

README.md

@@ -385,3 +385,4 @@ If you still don't understand README, you can checkout examples in specWepback w
 - v1.1.0 support writing assets in html
 - v1.1.2 print chunk name in runtime
 - v1.1.3 fix bug for using hot update
+- v1.2.0 support using loader and image in html

README_ZH.md

@@ -385,3 +385,5 @@ plugins: [
 - v1.1.0 允许在html中写入资源配置
 - v1.1.2 在运行时打印出chunk的名字
 - v1.1.3 修复使用热替换时的bug
+- v1.2.0 支持对html使用loader以及支持image插入到html中
+

index.js

@@ -1,13 +1,21 @@
 "use strict";
+/**
+ * @plugin html-res-webpack-plugin
+ * @author  heyli
+ * @reference: https://github.com/ampedandwired/html-webpack-plugin
+ */
 
 // debug mode
 const isDebug = false,
 	  IS_TO_STR = true; 
 
 const fs = require('fs'),
 	_ = require('lodash'),
+	vm = require('vm'),
 	path = require('path'),
+	Promise = require('bluebird'),
 	minify = require('html-minifier').minify,
+	childCompiler = require('./libs/compiler'),
 	utils = require('./libs/utils'),
 	errors = require('./libs/errors'),
 	loaderUtils = require('loader-utils');
@@ -23,6 +31,7 @@ function HtmlResWebpackPlugin(options) {
 		favicon: options.favicon || false,
 		templateContent: options.templateContent || function(tpl) { return tpl },
 		cssPublicPath: options.cssPublicPath || null,
+		entryLog: options.entryLog || false,
 	}, options);
 
 	this.logChunkName = true;
@@ -65,41 +74,63 @@ HtmlResWebpackPlugin.prototype.checkRequiredOptions = function(options) {
  */
 HtmlResWebpackPlugin.prototype.apply = function(compiler, callback) {
 
-  	compiler.plugin("make", function(compilation, callback) {
+	// format: loader!fiename
+	this.options.templateLoaderName = this.getFullTemplatePath(this.options.template);
+
+	var compilationPromise = null;
+
+  	compiler.plugin("make", (compilation, callback) => {
 	    isDebug && console.log("==================make================");
+
+	    compilationPromise = childCompiler.compileTemplate(this.options.templateLoaderName, compiler.context, this.options.filename, compilation);
+
 	    callback();
 	});
 
 
   	// right after emit, files will be generated
 	compiler.plugin("emit", (compilation, callback) => {
 	    isDebug && console.log("===================emit===============");
-	    // return basename, ie, /xxx/xxx.html return xxx.html
-	    this.options.htmlFileName = this.addFileToWebpackAsset(compilation, this.options.template, utils.getBaseName(this.options.template, this.options.filename), IS_TO_STR);
-
-	    // inject favicon
-	    if (this.options.favicon) {
-	    	this.options.faviconFileName = this.addFileToWebpackAsset(compilation, this.options.template, utils.getBaseName(this.options.favicon, null));
-	    }
 
-	    // webpack options
-	    this.webpackOptions = compilation.options;
-
-	    if (this.options.mode === 'default') {
-	    	this.buildStats(compilation);
-		    // start injecting resource into html
-		    this.injectAssets(compilation);
-		}
-		else if (this.options.mode === 'html') {
-			this.buildStatsHtmlMode(compilation);
-			// process
-			this.processAssets(compilation);
-		}
-
-	    // compress html content
-	    this.options.htmlMinify && this.compressHtml(compilation);
-	    
-	    callback();
+	    Promise.resolve()
+	    	.then(() => {
+        		return compilationPromise;
+      		})
+      		.then((compiledTemplate) => {
+      			return this.evaluateCompilationResult(compilation, compiledTemplate.content);
+      		}).
+      		then((compiledResult) => {
+
+      			// return basename, ie, /xxx/xxx.html return xxx.html
+			    this.options.htmlFileName = this.addFileToWebpackAsset(compilation, this.options.template, utils.getBaseName(this.options.template, this.options.filename), IS_TO_STR, compiledResult);
+
+			    // inject favicon
+			    if (this.options.favicon) {
+			    	this.options.faviconFileName = this.addFileToWebpackAsset(compilation, this.options.template, utils.getBaseName(this.options.favicon, null));
+			    }
+
+			    // webpack options
+			    this.webpackOptions = compilation.options;
+
+			    if (this.options.mode === 'default') {
+			    	this.buildStats(compilation);
+				    // start injecting resource into html
+				    this.injectAssets(compilation);
+				}
+				else if (this.options.mode === 'html') {
+					this.buildStatsHtmlMode(compilation);
+					// process
+					this.processAssets(compilation);
+				}
+
+			    // compress html content
+			    this.options.htmlMinify && this.compressHtml(compilation);
+			    
+			    callback();
+
+      			// console.log(compiledResult);
+
+      		});
 	});
 
 };
@@ -126,12 +157,52 @@ HtmlResWebpackPlugin.prototype.buildStatsHtmlMode = function(compilation) {
 	}
 
 	this.logChunkName = false;
-	console.log("=====html-res-webapck-plugin=====");
-	Object.keys(this.stats.assets).map((chunk, key) => {
-		console.log("chunk" + (key + 1) + ": " + chunk);
+	this.printChunkName(this.stats.assets);
+	
+};
+
+HtmlResWebpackPlugin.prototype.printChunkName = function(assets) {
+
+	let assetsArray = Object.keys(assets);
+
+	if (!assetsArray.length || !this.options.entryLog) {
+		return;
+	}
+
+	utils.alert('=====html-res-webapck-plugin=====');
+	utils.alert('assets used like:');
+	utils.alert('<link rel="stylesheet" href="' + assetsArray[0] + '">');
+	utils.alert('<script src="' + assetsArray[0] + '"></script>');
+
+	assetsArray.map((chunk, key) => {
+		utils.info("chunk" + (key + 1) + ": " + chunk);
 	});
 };
 
+HtmlResWebpackPlugin.prototype.evaluateCompilationResult = function(compilation, source) {
+	if (!source) {
+	    return Promise.reject('The child compilation didn\'t provide a result');
+	  }
+
+	  // The LibraryTemplatePlugin stores the template result in a local variable.
+	  // To extract the result during the evaluation this part has to be removed.
+	  source = source.replace('var HTML_RES_WEBPACK_PLUGIN_RESULT =', '');
+	  var template = this.options.templateLoaderName.replace(/^.+!/, '').replace(/\?.+$/, '');
+	  var vmContext = vm.createContext(_.extend({HTML_WEBPACK_PLUGIN: true, require: require}, global));
+	  var vmScript = new vm.Script(source, {filename: template});
+	  // console.log(vmScript);
+	  // Evaluate code and cast to string
+	  var newSource;
+	  try {
+	    newSource = vmScript.runInContext(vmContext);
+	  } catch (e) {
+	    return Promise.reject(e);
+	  }
+	  return typeof newSource === 'string' || typeof newSource === 'function'
+	    ? Promise.resolve(newSource)
+	    : Promise.reject('The loader "' + this.options.templateLoaderName + '" didn\'t return html.');
+};
+
 /**
  * find resources related the html
  * @param  {[type]} compilation [description]
@@ -383,13 +454,13 @@ HtmlResWebpackPlugin.prototype.inlineRes = function(compilation, chunk, file, fi
  * @param {[type]}  template    [description]
  * @param {Boolean} isToStr     [description]
  */
-HtmlResWebpackPlugin.prototype.addFileToWebpackAsset = function(compilation, template, basename, isToStr) {
+HtmlResWebpackPlugin.prototype.addFileToWebpackAsset = function(compilation, template, basename, isToStr, source) {
 	var filename = path.resolve(template);
 
     compilation.fileDependencies.push(filename);
     compilation.assets[basename] = {
     	source: () => {
-    		let fileContent = (isToStr) ? fs.readFileSync(filename).toString() : fs.readFileSync(filename);
+    		let fileContent = (isToStr) ? source : fs.readFileSync(filename);
       		return fileContent;
       	},
       	size: () => {
@@ -400,6 +471,23 @@ HtmlResWebpackPlugin.prototype.addFileToWebpackAsset = function(compilation, tem
     return basename;
 };
 
+/**
+ * Helper to return the absolute template path with a fallback loader
+ */
+HtmlResWebpackPlugin.prototype.getFullTemplatePath = function (template, context) {
+  // If the template doesn't use a loader use the lodash template loader
+  if (template.indexOf('!') === -1) {
+    template = require.resolve('./libs/loader.js') + '!' + template;
+  }
+  // Resolve template path
+
+  return template.replace(
+    /([!])([^\/\\][^!\?]+|[^\/\\!?])($|\?.+$)/,
+    function (match, prefix, filepath, postfix) {
+      return prefix + path.resolve(filepath) + postfix;
+    });
+};
+
 /**
  * compress html files
  * @param  {[type]} compilation [description]

libs/compiler.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var _ = require('lodash');
+var path = require('path');
+var Promise = require('bluebird');
+var NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin');
+var NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
+var LoaderTargetPlugin = require('webpack/lib/LoaderTargetPlugin');
+var LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
+var SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
+
+
+module.exports.compileTemplate = function compileTemplate(template, context, outputFilename, compilation) {
+	var outputOptions = {
+	    filename: outputFilename,
+	    publicPath: compilation.outputOptions.publicPath
+	};
+
+	// console.log(outputOptions);
+	// Store the result of the parent compilation before we start the child compilation
+	var assetsBeforeCompilation = _.assign({}, compilation.assets[outputOptions.filename]);
+	// Create an additional child compiler which takes the template
+	// and turns it into an Node.JS html factory.
+	// This allows us to use loaders during the compilation
+	
+	var compilerName = getCompilerName(context, outputFilename);
+	var childCompiler = compilation.createChildCompiler(compilerName, outputOptions);
+	childCompiler.context = context;
+	childCompiler.apply(
+		new NodeTemplatePlugin(outputOptions),
+	    new NodeTargetPlugin(),
+	    new LibraryTemplatePlugin('HTML_RES_WEBPACK_PLUGIN_RESULT', 'var'),
+	    new SingleEntryPlugin(this.context, template),
+	    new LoaderTargetPlugin('node')
+	);
+
+	// Fix for "Uncaught TypeError: __webpack_require__(...) is not a function"
+	// Hot module replacement requires that every child compiler has its own
+	// cache. @see https://github.com/ampedandwired/html-webpack-plugin/pull/179
+	childCompiler.plugin('compilation', function (compilation) {
+	    if (compilation.cache) {
+	      if (!compilation.cache[compilerName]) {
+	        compilation.cache[compilerName] = {};
+	      }
+	      compilation.cache = compilation.cache[compilerName];
+	    }
+	});
+
+
+	// Compile and return a promise
+  	return new Promise(function (resolve, reject) {
+    	childCompiler.runAsChild(function (err, entries, childCompilation) {
+      		// Resolve / reject the promise
+      		if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
+		        var errorDetails = childCompilation.errors.map(function (error) {
+		          return error.message + (error.error ? ':\n' + error.error : '');
+		        }).join('\n');
+		        reject(new Error('Child compilation failed:\n' + errorDetails));
+		    } 
+		    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]
+		        });
+	        
+	        	// console.log(childCompilation.assets[outputName].source());
+	        	// Restore the parent compilation to the state like it
+	        	// was before the child compilation
+		        
+		        compilation.assets[outputName] = assetsBeforeCompilation[outputName];
+
+		        // console.log(childCompilation.assets[outputName].source());
+
+		        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,
+		          	// Output name
+		          	outputName: outputName,
+		          	// Compiled code
+		          	content: childCompilation.assets[outputName].source()
+		        });
+	      	}
+    	});
+  	});
+
+};
+
+/**
+ * Returns the child compiler name e.g. 'html-webpack-plugin for "index.html"'
+ */
+function getCompilerName (context, filename) {
+	var absolutePath = path.resolve(context, filename);
+  	var relativePath = path.relative(context, absolutePath);
+  	return 'html-webpack-plugin for "' + (absolutePath.length < relativePath.length ? absolutePath : relativePath) + '"';
+}

libs/loader.js

@@ -0,0 +1,51 @@
+/* This loader renders the template with underscore if no other loader was found */
+'use strict';
+
+var _ = require('lodash');
+var loaderUtils = require('loader-utils');
+
+module.exports = function (source) {
+  if (this.cacheable) {
+    this.cacheable();
+  }
+  var allLoadersButThisOne = this.loaders.filter(function (loader) {
+    // Loader API changed from `loader.module` to `loader.normal` in Webpack 2.
+    return (loader.module || loader.normal) !== module.exports;
+  });
+  // This loader shouldn't kick in if there is any other loader
+  if (allLoadersButThisOne.length > 0) {
+    return source;
+  }
+  // Skip .js files
+  if (/\.js$/.test(this.request)) {
+    return source;
+  }
+
+  // The following part renders the tempalte with lodash as aminimalistic loader
+  //
+  // Get templating options
+  var options = loaderUtils.parseQuery(this.query);
+  // Webpack 2 does not allow with() statements, which lodash templates use to unwrap
+  // the parameters passed to the compiled template inside the scope. We therefore
+  // need to unwrap them ourselves here. This is essentially what lodash does internally
+  // To tell lodash it should not use with we set a variable
+  var template = _.template(source, _.defaults(options, { variable: 'data' }));
+  // All templateVariables which should be available
+  // @see HtmlWebpackPlugin.prototype.executeTemplate
+  var templateVariables = [
+    'compilation',
+    'webpack',
+    'webpackConfig',
+    'htmlWebpackPlugin'
+  ];
+  return 'var _ = require(' + loaderUtils.stringifyRequest(this, require.resolve('lodash')) + ');' +
+    'module.exports = function (templateParams) {' +
+      // Declare the template variables in the outer scope of the
+      // lodash template to unwrap them
+      templateVariables.map(function (variableName) {
+        return 'var ' + variableName + ' = templateParams.' + variableName;
+      }).join(';') + ';' +
+      // Execute the lodash template
+      'return (' + template.source + ')();' +
+    '}';
+};