You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							125 lines
						
					
					
						
							5.3 KiB
						
					
					
				
			
		
		
	
	
							125 lines
						
					
					
						
							5.3 KiB
						
					
					
				/* | 
						|
 * This file uses webpack to compile a template with a child compiler. | 
						|
 * | 
						|
 * [TEMPLATE] -> [JAVASCRIPT] | 
						|
 * | 
						|
 */ | 
						|
'use strict'; | 
						|
const path = require('path'); | 
						|
const NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin'); | 
						|
const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin'); | 
						|
const LoaderTargetPlugin = require('webpack/lib/LoaderTargetPlugin'); | 
						|
const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin'); | 
						|
const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin'); | 
						|
 | 
						|
/** | 
						|
 * Compiles the template into a nodejs factory, adds its to the compilation.assets | 
						|
 * and returns a promise of the result asset object. | 
						|
 * | 
						|
 * @param template relative path to the template file | 
						|
 * @param context path context | 
						|
 * @param outputFilename the file name | 
						|
 * @param compilation The webpack compilation object | 
						|
 * | 
						|
 * Returns an object: | 
						|
 * { | 
						|
 *  hash: {String} - Base64 hash of the file | 
						|
 *  content: {String} - Javascript executable code of the template | 
						|
 * } | 
						|
 * | 
						|
 */ | 
						|
module.exports.compileTemplate = function compileTemplate (template, context, outputFilename, compilation) { | 
						|
  // The entry file is just an empty helper as the dynamic template | 
						|
  // require is added in "loader.js" | 
						|
  const outputOptions = { | 
						|
    filename: outputFilename, | 
						|
    publicPath: compilation.outputOptions.publicPath | 
						|
  }; | 
						|
  // Store the result of the parent compilation before we start the child compilation | 
						|
  const assetsBeforeCompilation = Object.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 | 
						|
  const compilerName = getCompilerName(context, outputFilename); | 
						|
  const childCompiler = compilation.createChildCompiler(compilerName, outputOptions); | 
						|
  childCompiler.context = context; | 
						|
  new NodeTemplatePlugin(outputOptions).apply(childCompiler); | 
						|
  new NodeTargetPlugin().apply(childCompiler); | 
						|
  new LibraryTemplatePlugin('HTML_WEBPACK_PLUGIN_RESULT', 'var').apply(childCompiler); | 
						|
 | 
						|
  // Using undefined as name for the SingleEntryPlugin causes a unexpected output as described in | 
						|
  // https://github.com/jantimon/html-webpack-plugin/issues/895 | 
						|
  // Using a string as a name for the SingleEntryPlugin causes problems with HMR as described in | 
						|
  // https://github.com/jantimon/html-webpack-plugin/issues/900 | 
						|
  // Until the HMR issue is fixed we keep the ugly output: | 
						|
  new SingleEntryPlugin(this.context, template, undefined).apply(childCompiler); | 
						|
 | 
						|
  new LoaderTargetPlugin('node').apply(childCompiler); | 
						|
 | 
						|
  // 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 | 
						|
 | 
						|
  // Backwards compatible version of: childCompiler.hooks.compilation | 
						|
  (childCompiler.hooks ? childCompiler.hooks.compilation.tap.bind(childCompiler.hooks.compilation, 'HtmlWebpackPlugin') : childCompiler.plugin.bind(childCompiler, 'compilation'))(compilation => { | 
						|
    if (compilation.cache) { | 
						|
      if (!compilation.cache[compilerName]) { | 
						|
        compilation.cache[compilerName] = {}; | 
						|
      } | 
						|
      compilation.cache = compilation.cache[compilerName]; | 
						|
    } | 
						|
  }); | 
						|
 | 
						|
  // Compile and return a promise | 
						|
  return new Promise((resolve, reject) => { | 
						|
    childCompiler.runAsChild((err, entries, childCompilation) => { | 
						|
      // Resolve / reject the promise | 
						|
      if (childCompilation && childCompilation.errors && childCompilation.errors.length) { | 
						|
        const errorDetails = childCompilation.errors.map(error => 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 | 
						|
        // In webpack 4 the plugin interface changed, so check for available fns | 
						|
        const outputName = compilation.mainTemplate.getAssetPath | 
						|
          ? compilation.mainTemplate.hooks.assetPath.call(outputOptions.filename, { | 
						|
            hash: childCompilation.hash, | 
						|
            chunk: entries[0] | 
						|
          }) | 
						|
          : 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, | 
						|
          // 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) { | 
						|
  const absolutePath = path.resolve(context, filename); | 
						|
  const relativePath = path.relative(context, absolutePath); | 
						|
  return 'html-webpack-plugin for "' + (absolutePath.length < relativePath.length ? absolutePath : relativePath) + '"'; | 
						|
}
 | 
						|
 |