From 04b2743adb1f291c493941b1b200f1c5db334aa6 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Wed, 20 May 2015 19:09:45 +0200 Subject: [PATCH] Fix webpack-dev-server child compilation on template change --- index.js | 43 ++++++++++++++++++++----------------------- 1 file changed, 20 insertions(+), 23 deletions(-) diff --git a/index.js b/index.js index 563d225d..8e25aa14 100644 --- a/index.js +++ b/index.js @@ -41,16 +41,19 @@ function HtmlWebpackPlugin(options) { HtmlWebpackPlugin.prototype.apply = function(compiler) { var self = this; + var compilationPromise; + self.context = compiler.context; + + compiler.plugin('this-compilation', function(compilation, callback) { + // Compile the template + compilationPromise = self.compileTemplate(self.options.template, self.options.filename, compilation); + compilationPromise.finally(callback); + }); compiler.plugin('emit', function(compilation, callback) { // Get all chunks var chunks = self.filterChunks(compilation.getStats().toJson(), self.options.chunks, self.options.excludeChunks); - // Skip if no new files were added - if (self.didChunkFilesChange(chunks) === false) { - return callback(); - } - // Compile the template - self.compileTemplate(self.options.template, self.options.filename, compilation) + compilationPromise .then(function(resultAsset) { // Once everything is compiled evaluate the html factory // and replace it with its content @@ -84,17 +87,12 @@ HtmlWebpackPlugin.prototype.apply = function(compiler) { }; /** - * Checks wether files were added or removed since the last call + * Returns the child compiler name */ -HtmlWebpackPlugin.prototype.didChunkFilesChange = function(chunks) { - var files = _.flatten(chunks.map(function(chunk) { - return chunk.files; - })); - if(!this.filesOfLastRun || _.difference(files, this.filesOfLastRun).length > 0) { - this.filesOfLastRun = files; - return true; - } - return false; +HtmlWebpackPlugin.prototype.getCompilerName = function() { + var absolutePath = path.resolve(this.context, this.options.filename); + var relativePath = path.relative(this.context, absolutePath); + return 'html-webpack-plugin for "' + (absolutePath.length < relativePath.length ? absolutePath : relativePath) + '"'; }; /** @@ -104,7 +102,6 @@ HtmlWebpackPlugin.prototype.didChunkFilesChange = function(chunks) { HtmlWebpackPlugin.prototype.compileTemplate = function(template, outputFilename, compilation) { // The entry file is just an empty helper as the dynamic template // require is added in "loader.js" - var entryRequest = template; var outputOptions = { filename: outputFilename, publicPath: compilation.outputOptions.publicPath @@ -112,25 +109,25 @@ HtmlWebpackPlugin.prototype.compileTemplate = function(template, outputFilename, // 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 = 'html-webpack-plugin for "' + path.basename(outputOptions.filename) + '"'; + var compilerName = this.getCompilerName(); var childCompiler = compilation.createChildCompiler(compilerName, outputOptions); childCompiler.apply(new NodeTemplatePlugin(outputOptions)); childCompiler.apply(new LibraryTemplatePlugin('result', 'var')); childCompiler.apply(new NodeTargetPlugin()); - childCompiler.apply(new SingleEntryPlugin(this.context, entryRequest)); + childCompiler.apply(new SingleEntryPlugin(this.context, template)); // Create a subCache (copied from https://github.com/SanderSpies/extract-text-webpack-plugin/blob/master/loader.js) - var subCache = 'HtmlWebpackPlugin-' + outputFilename; childCompiler.plugin('compilation', function(compilation) { if(compilation.cache) { - if(!compilation.cache[subCache]) { - compilation.cache[subCache] = {}; + if(!compilation.cache[compilerName]) { + compilation.cache[compilerName] = {}; } - compilation.cache = compilation.cache[subCache]; + compilation.cache = compilation.cache[compilerName]; } }); // Compile and return a promise return new Promise(function (resolve, reject) { childCompiler.runAsChild(function(err) { + // Resolve / reject the promise if (err) { reject(err); } else {