Skip to content

Instantly share code, notes, and snippets.

@vladkosinov
Last active January 24, 2016 19:43
Show Gist options
  • Save vladkosinov/a916047d9ea74a10bf4c to your computer and use it in GitHub Desktop.
Save vladkosinov/a916047d9ea74a10bf4c to your computer and use it in GitHub Desktop.
Example with overriding HtmlWebpackPlugin params to templateContent function and compilation instance manipulating
import { remove } from 'lodash';
const MANIFEST_CHUNK_NAME_REGEX = /.*manifest\..+\.js/;
export default function (templateParams, compilation) {
const stats = {
styles: templateParams.htmlWebpackPlugin.files.css,
scripts: templateParams.htmlWebpackPlugin.files.js
};
const manifestChunkName = Object.keys(compilation.assets).find((asset) => {
return MANIFEST_CHUNK_NAME_REGEX.test(asset);
});
if (manifestChunkName) {
stats.manifestContent = compilation.assets[manifestChunkName]._value;
remove(templateParams.htmlWebpackPlugin.files.js, name => {
return MANIFEST_CHUNK_NAME_REGEX.test(name);
});
/* eslint-disable no-param-reassign */
compilation.assets['stats.json'] = compilation.assets[manifestChunkName];
compilation.assets['stats.json']._value = JSON.stringify(stats, null, 4);
delete compilation.assets[manifestChunkName];
/* eslint-enable no-param-reassign */
}
return { assets: stats };
}
// This trick gives us ability to write pure template files:
doctype html
html
head
each filePath in assets.styles
link(rel="stylesheet", href=filePath)
body
#app
if assets.manifestContent
script !{ assets.manifestContent }
each filePath in assets.scripts
script(src=filePath)
// ...
plugins: [
new HtmlWebpackPlugin({
templateContent: compose(indexPageTemplate, extractStats)
})
]
// ...
@jantimon
Copy link

Hi, this is just a first step but maybe you can go from here alone - feel free to ask for details :)

plugins: [
  new HtmlWebpackPlugin({
    template: 'extract-stats.js'
  })
]

Now we can use the power of the compiler:
extract-stats.js

  // This function has to return a string or promised string:
  module.exports = function(compilationResult, chunks, assets, compilation) {
      // Play around with the arguments and then use the webpack jade loader to load the jade:
      return require('./template.jade)({assets: assets});
  };

@vladkosinov
Copy link
Author

@jantimon

this function will receive only first argument :(

function(compilationResult, chunks, assets, compilation) 

https://github.com/ampedandwired/html-webpack-plugin/blob/master/index.js#L212

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment