Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(compiler): Use a single compiler for multiple plugin instances
  • Loading branch information
jantimon committed Jun 21, 2018
1 parent c6f0f5a commit f29ae88
Show file tree
Hide file tree
Showing 2 changed files with 240 additions and 90 deletions.
12 changes: 11 additions & 1 deletion index.js
Expand Up @@ -84,12 +84,19 @@ class HtmlWebpackPlugin {
this.options.filename = path.relative(compiler.options.output.path, filename);
}

// Clear the cache once a new HtmlWebpackPlugin is added
childCompiler.clearCache(compiler);

compiler.hooks.compile.tap('HtmlWebpackPlugin', () => {
childCompiler.addTemplateToCompiler(compiler, this.options.template);
});

// setup hooks for third party plugins
compiler.hooks.compilation.tap('HtmlWebpackPluginHooks', getHtmlWebpackPluginHooks);

compiler.hooks.make.tapAsync('HtmlWebpackPlugin', (compilation, callback) => {
// Compile the template (queued)
compilationPromise = childCompiler.compileTemplate(self.options.template, compiler.context, self.options.filename, compilation)
compilationPromise = childCompiler.compileTemplate(self.options.template, self.options.filename, compilation)
.catch(err => {
compilation.errors.push(prettyError(err, compiler.context).toString());
return {
Expand All @@ -114,6 +121,9 @@ class HtmlWebpackPlugin {
* @param {() => void} callback
*/
(compilation, callback) => {
// Clear the childCompilerCache
childCompiler.clearCache(compiler);

// Get all entry point names for this html file
const entryNames = Array.from(compilation.entrypoints.keys());
const filteredEntryNames = self.filterChunks(entryNames, self.options.chunks, self.options.excludeChunks);
Expand Down
318 changes: 229 additions & 89 deletions lib/compiler.js
@@ -1,114 +1,254 @@
/*
// @ts-check
/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
/** @typedef {import("webpack/lib/Compiler.js")} WebpackCompiler */
/** @typedef {import("webpack/lib/Chunk.js")} WebpackChunk */
'use strict';
/**
* @file
* 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
* }
*
* The HtmlWebpackChildCompiler is a helper to allow resusing one childCompiler
* for multile HtmlWebpackPlugin instances to improve the compilation performance.
*/
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
childCompiler.hooks.compilation.tap('HtmlWebpackPlugin', compilation => {
if (compilation.cache) {
if (!compilation.cache[compilerName]) {
compilation.cache[compilerName] = {};
}
compilation.cache = compilation.cache[compilerName];
class HtmlWebpackChildCompiler {

constructor () {
/**
* @type {string[]} templateIds
* The template array will allow us to keep track which input generated which output
*/
this.templates = [];
/**
* @type {Promise<{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}>}
*/
this.compilationPromise;

/**
* @type {Date}
*/
this.compilationStarted;
}

/**
* Add a templatePath to the child compiler
* The given template will be compiled by `compileTemplates`
* @param {string} template - The webpack path to the template e.g. `'!!html-loader!index.html'`
*/
addTemplate (template) {
const templateId = this.templates.indexOf(template);
// Don't add the template to the compiler if a similar template was already added
if (templateId !== -1) {
return templateId;
}
});
// A child compiler can compile only once
// throw an error if a new template is added after the compilation started
if (this.compilationPromise) {
throw new Error('New templates can only be added before `compileTemplates` was called.');
}
// Add the template to the childCompiler
const newTemplateId = this.templates.length;
this.templates.push(template);
return newTemplateId;
}

// 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
const outputName = compilation.mainTemplate.hooks.assetPath.call(outputOptions.filename, {
hash: childCompilation.hash,
chunk: entries[0]
});
/**
* This function will start the template compilation
* once it is started no more templates can be added
*
* @param {WebpackCompilation} mainCompilation
* @returns {Promise<{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}>}
*/
compileTemplates (mainCompilation) {
// To prevent multiple compilations for the same template
// the compilation is cached in a promise.
// If it already exists return
if (this.compilationPromise) {
return this.compilationPromise;
}

// The entry file is just an empty helper as the dynamic template
// require is added in "loader.js"
const outputOptions = {
filename: '__child-[name]',
publicPath: mainCompilation.outputOptions.publicPath
};
const compilerName = 'HtmlWebpackCompiler';
// 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 childCompiler = mainCompilation.createChildCompiler(compilerName, outputOptions);
// The file path context which webpack uses to resolve all relative files to
childCompiler.context = mainCompilation.compiler.context;
// Compile the template to nodejs javascript
new NodeTemplatePlugin(outputOptions).apply(childCompiler);
new NodeTargetPlugin().apply(childCompiler);
new LibraryTemplatePlugin('HTML_WEBPACK_PLUGIN_RESULT', 'var').apply(childCompiler);
new LoaderTargetPlugin('node').apply(childCompiler);

// 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];
// 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.hooks.compilation.tap('HtmlWebpackPlugin', compilation => {
if (compilation.cache) {
if (!compilation.cache[compilerName]) {
compilation.cache[compilerName] = {};
}
resolve({
// Hash of the template entry point
hash: entries[0].hash,
// Output name
outputName: outputName,
// Compiled code
content: childCompilation.assets[outputName].source()
});
compilation.cache = compilation.cache[compilerName];
}
});

// Add all templates
this.templates.forEach((template, index) => {
new SingleEntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}`).apply(childCompiler);
});

this.compilationStarted = new Date();
this.compilationPromise = new Promise((resolve, reject) => {
childCompiler.runAsChild((err, entries, childCompilation) => {
// Extract templates
const compiledTemplates = entries
? extractHelperFilesFromCompilation(mainCompilation, childCompilation, outputOptions.filename, entries)
: [];
// Reject the promise if the childCompilation contains error
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));
return;
}
// Reject if the error object contains errors
if (err) {
reject(err);
return;
}
/**
* @type {{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}}
*/
const result = {};
compiledTemplates.forEach((templateSource, entryIndex) => {
// The compiledTemplates are generated from the entries added in
// the addTemplate function.
// Therefore the array index of this.templates should be the as entryIndex.
result[this.templates[entryIndex]] = {
content: templateSource,
hash: childCompilation.hash,
entry: entries[entryIndex]
};
});
resolve(result);
});
});

return this.compilationPromise;
}
}

/**
* The webpack child compilation will create files as a side effect.
* This function will extract them and clean them up so they won't be written to disk.
*
* Returns the source code of the compiled templates as string
*
* @returns Array<string>
*/
function extractHelperFilesFromCompilation (mainCompilation, childCompilation, filename, childEntryChunks) {
const helperAssetNames = childEntryChunks.map((entryChunk, index) => {
return mainCompilation.mainTemplate.hooks.assetPath.call(filename, {
hash: childCompilation.hash,
chunk: entryChunk,
name: `HtmlWebpackPlugin_${index}`
});
});
};

helperAssetNames.forEach((helperFileName) => {
delete mainCompilation.assets[helperFileName];
});

const helperContents = helperAssetNames.map((helperFileName) => {
return childCompilation.assets[helperFileName].source();
});

return helperContents;
}

/**
* @type {WeakMap<WebpackCompiler, HtmlWebpackChildCompiler>}}
*/
const childCompilerCache = new WeakMap();

/**
* Get child compiler from cache or a new child compiler for the given mainCompilation
*
* @param {WebpackCompiler} mainCompiler
*/
function getChildCompiler (mainCompiler) {
if (!childCompilerCache[mainCompiler]) {
childCompilerCache[mainCompiler] = new HtmlWebpackChildCompiler();
}
return childCompilerCache[mainCompiler];
}

/**
* Returns the child compiler name e.g. 'html-webpack-plugin for "index.html"'
* Remove the childCompiler from the cache
*
* @param {WebpackCompiler} mainCompiler
*/
function clearCache (mainCompiler) {
delete (childCompilerCache[mainCompiler]);
}

/**
* Register a template for the current main compiler
* @param {WebpackCompiler} mainCompiler
* @param {string} templatePath
*/
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) + '"';
function addTemplateToCompiler (mainCompiler, templatePath) {
getChildCompiler(mainCompiler).addTemplate(templatePath);
}

/**
* Starts the compilation for all templates.
* This has to be called once all templates where added.
*
* If this function is called multiple times it will use a cache inside
* the childCompiler
*
* @param {string} templatePath
* @param {string} outputFilename
* @param {WebpackCompilation} mainCompilation
*/
function compileTemplate (templatePath, outputFilename, mainCompilation) {
const childCompiler = getChildCompiler(mainCompilation.compiler);
return childCompiler.compileTemplates(mainCompilation).then((compiledTemplates) => {
const compiledTemplate = compiledTemplates[templatePath];
// Replace [hash] placeholders in filename
const outputName = mainCompilation.mainTemplate.hooks.assetPath.call(outputFilename, {
hash: compiledTemplate.hash,
chunk: compiledTemplate.entry
});
return {
// Hash of the template entry point
hash: compiledTemplate.hash,
// Output name
outputName: outputName,
// Compiled code
content: compiledTemplate.content
};
});
}

module.exports = {
addTemplateToCompiler,
compileTemplate,
clearCache
};

0 comments on commit f29ae88

Please sign in to comment.