From e631065df8c28220981f83676725c5c147b85110 Mon Sep 17 00:00:00 2001 From: Nikolay Artamonov Date: Sat, 18 Apr 2015 15:52:31 +0300 Subject: [PATCH 01/10] Fixed gathering CSS chunks with content hash in their names --- index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 6ec4754..c1667a4 100644 --- a/index.js +++ b/index.js @@ -111,7 +111,9 @@ HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webp // Gather all css files var css = chunkFiles.filter(function(chunkFile){ - return path.extname(chunkFile) === '.css'; + // Some chunks may contain content hash in their names, for ex. 'main.css?1e7cac4e4d8b52fd5ccd2541146ef03f'. + // We must proper handle such cases, so we use regexp testing here + return /^.css/.test(path.extname(chunkFile)); }); assets.chunks[chunkName].css = css; assets.css = assets.css.concat(css); From 76d45eda4828d47564ef0ec04206c7bc09615cbd Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Fri, 13 Mar 2015 17:09:36 +0100 Subject: [PATCH 02/10] Add append option --- index.js | 49 +++++++++++++++++++++++++++++++++ spec/HtmlWebpackPluginSpec.js | 51 +++++++++++++++++++++++++++++++++++ spec/fixtures/plain.html | 10 +++++++ 3 files changed, 110 insertions(+) create mode 100644 spec/fixtures/plain.html diff --git a/index.js b/index.js index c1667a4..62e8a1b 100644 --- a/index.js +++ b/index.js @@ -55,6 +55,10 @@ HtmlWebpackPlugin.prototype.emitHtml = function(compilation, htmlTemplateContent } catch(e) { compilation.errors.push(new Error('HtmlWebpackPlugin: template error ' + e)); } + // Append/Inject link and script elements into an existing html file + if (this.options.append) { + html = this.appendAssetsToHtml(html, templateParams, this.options.append); + } compilation.assets[outputFilename] = { source: function() { return html; @@ -126,6 +130,51 @@ HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webp return assets; }; +/** + * Inject the assets into the given html string + */ +HtmlWebpackPlugin.prototype.appendAssetsToHtml = function(html, templateParams, chunks) { + var assets = templateParams.htmlWebpackPlugin.files; + // If chunks is set to true append all chunks + if (chunks === true) { + chunks = Object.keys(assets.chunks); + } + // Gather all css and script files + var styles = []; + var scripts = []; + chunks.forEach(function(chunkName) { + styles = styles.concat(assets.chunks[chunkName].css); + scripts.push(assets.chunks[chunkName].entry); + }); + // Turn script files into script tags + scripts = scripts.map(function(scriptPath) { + return ''; + }); + // Turn css files into link tags + styles = styles.map(function(stylePath) { + return ''; + }); + // Append scripts + html = html.replace(/(<\/body>)/i, function (match, start) { + return scripts.join('') + match; + }); + // Append styles + html = html.replace(/(<\/head>)/i, function (match, start) { + return styles.join('') + match; + }); + // Append manifest + if (assets.manifest) { + html = html.replace(/()/i, function (match, start, end) { + // Don't append a manifest if a manifest was already specified + if (match.test(/\smanifest\s*=/)) { + return match; + } + return start + ' manifest="' + assets.manifest + '?' + templateParams.hash + '"' + end; + }); + } + return html; +}; + /** * A helper to support the templates written for html-webpack-plugin <= 1.1.0 */ diff --git a/spec/HtmlWebpackPluginSpec.js b/spec/HtmlWebpackPluginSpec.js index 0bea99b..02a93cb 100644 --- a/spec/HtmlWebpackPluginSpec.js +++ b/spec/HtmlWebpackPluginSpec.js @@ -85,6 +85,57 @@ describe('HtmlWebpackPlugin', function() { [''; + return ''; }); // Turn css files into link tags styles = styles.map(function(stylePath) { - return ''; + return ''; }); // Append scripts to body element html = html.replace(/(<\/body>)/i, function (match) { @@ -170,7 +170,7 @@ HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, templateParams if (match.test(/\smanifest\s*=/)) { return match; } - return start + ' manifest="' + assets.manifest + '?' + templateParams.hash + '"' + end; + return start + ' manifest="' + assets.manifest + templateParams.htmlWebpackPlugin.querystring + '"' + end; }); } return html; diff --git a/spec/HtmlWebpackPluginSpec.js b/spec/HtmlWebpackPluginSpec.js index 81479ef..8798258 100644 --- a/spec/HtmlWebpackPluginSpec.js +++ b/spec/HtmlWebpackPluginSpec.js @@ -99,7 +99,7 @@ describe('HtmlWebpackPlugin', function() { inject: true, template: path.join(__dirname, 'fixtures/plain.html') })] - }, [''; + return ''; }); // Turn css files into link tags styles = styles.map(function(stylePath) { - return ''; + return ''; }); // Append scripts to body element html = html.replace(/(<\/body>)/i, function (match) { @@ -170,7 +177,7 @@ HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, templateParams if (match.test(/\smanifest\s*=/)) { return match; } - return start + ' manifest="' + assets.manifest + templateParams.htmlWebpackPlugin.querystring + '"' + end; + return start + ' manifest="' + assets.manifest + '"' + end; }); } return html; From fd44794a5cf4c55d7e4bfd0fd9f0e2857c986a2e Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Mon, 20 Apr 2015 22:42:24 +0200 Subject: [PATCH 07/10] Cleaner chunks api --- README.md | 27 ++++++++++++++++++++++++++- index.js | 31 ++++++++++++++++++------------- spec/HtmlWebpackPluginSpec.js | 24 ++++++++++++++++++++++-- 3 files changed, 66 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 1ebc199..b013a20 100644 --- a/README.md +++ b/README.md @@ -154,7 +154,7 @@ plugins: [ ] ``` -The `templateContent` option can also be a function: +The `templateContent` option can also be a function to use another template language like jade: ```javascript plugins: [ new HtmlWebpackPlugin({ @@ -206,3 +206,28 @@ template is rendered. This variable has the following attributes: - `webpackConfig`: the webpack configuration that was used for this compilation. This can be used, for example, to get the `publicPath` (`webpackConfig.output.publicPath`). + + +Filtering chunks +---------------- + +To include only certain chunks you can limit the chunks beeing used: + +```javascript +plugins: [ + new HtmlWebpackPlugin({ + chunks: ['app'] + }) +] +``` + +It is also possible to exclude certain chunks by setting the `excludeChunks` option: + +```javascript +plugins: [ + new HtmlWebpackPlugin({ + excludeChunks: ['dev-helper'] + }) +] +``` + diff --git a/index.js b/index.js index feb6e86..f638ecb 100644 --- a/index.js +++ b/index.js @@ -16,7 +16,7 @@ HtmlWebpackPlugin.prototype.apply = function(compiler) { templateParams.webpack = webpackStatsJson; templateParams.htmlWebpackPlugin = {}; templateParams.htmlWebpackPlugin.assets = self.htmlWebpackPluginLegacyAssets(compilation, webpackStatsJson); - templateParams.htmlWebpackPlugin.files = self.htmlWebpackPluginAssets(compilation, webpackStatsJson, self.options.hash); + templateParams.htmlWebpackPlugin.files = self.htmlWebpackPluginAssets(compilation, webpackStatsJson, self.options.chunks, self.options.excludeChunks); templateParams.htmlWebpackPlugin.options = self.options; templateParams.webpackConfig = compilation.options; @@ -58,7 +58,7 @@ HtmlWebpackPlugin.prototype.emitHtml = function(compilation, htmlTemplateContent } // Inject link and script elements into an existing html file if (this.options.inject) { - html = this.injectAssetsIntoHtml(html, templateParams, this.options.inject); + html = this.injectAssetsIntoHtml(html, templateParams); } compilation.assets[outputFilename] = { source: function() { @@ -71,9 +71,8 @@ HtmlWebpackPlugin.prototype.emitHtml = function(compilation, htmlTemplateContent }; -HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webpackStatsJson, appendHash) { +HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webpackStatsJson, includedChunks, excludedChunks) { var publicPath = compilation.options.output.publicPath || ''; - var queryString = appendHash ? '?' + webpackStatsJson.hash : ''; var assets = { // Will contain all js & css files by chunk @@ -85,8 +84,6 @@ HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webp // Will contain the html5 appcache manifest files if it exists manifest: Object.keys(compilation.assets).filter(function(assetFile){ return path.extname(assetFile) === '.appcache'; - }).map(function(assetFile) { - return assetFile + queryString; })[0] }; @@ -101,11 +98,21 @@ HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webp for (var i = 0; i < chunks.length; i++) { var chunk = chunks[i]; var chunkName = chunk.names[0]; + + // Skip if the chunks should be filtered and the given chunk was not added explicity + if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) { + continue; + } + // Skip if the chunks should be filtered and the given chunk was excluded explicity + if (Array.isArray(excludedChunks) && excludedChunks.indexOf(chunkName) !== -1) { + continue; + } + assets.chunks[chunkName] = {}; // Prepend the public path to all chunk files - var chunkFiles = [].concat(chunk.files).map(function(chunkFile) { - return publicPath + chunkFile + queryString; + var chunkFiles = [].concat(webpackStatsJson.assetsByChunkName[chunkName]).map(function(chunkFile) { + return publicPath + chunkFile; }); // Append a hash for cache busting @@ -141,12 +148,10 @@ HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webp /** * Injects the assets into the given html string */ -HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, templateParams, chunks) { +HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, templateParams) { var assets = templateParams.htmlWebpackPlugin.files; - // If chunks is set to true inject all chunks - if (chunks === true) { - chunks = Object.keys(assets.chunks); - } + var chunks = Object.keys(assets.chunks); + // Gather all css and script files var styles = []; var scripts = []; diff --git a/spec/HtmlWebpackPluginSpec.js b/spec/HtmlWebpackPluginSpec.js index 8798258..d1cb91e 100644 --- a/spec/HtmlWebpackPluginSpec.js +++ b/spec/HtmlWebpackPluginSpec.js @@ -113,7 +113,8 @@ describe('HtmlWebpackPlugin', function() { filename: '[name]_bundle.js' }, plugins: [new HtmlWebpackPlugin({ - inject: ['util', 'app'], + inject: true, + chunks: ['util', 'app'], templateContent: fs.readFileSync(path.join(__dirname, 'fixtures/plain.html'), 'utf8') })] }, ['