From fd44794a5cf4c55d7e4bfd0fd9f0e2857c986a2e Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Mon, 20 Apr 2015 22:42:24 +0200 Subject: [PATCH] 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') })] }, ['