/* * 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) + '"'; }