Using webpack versioned image filenames for pre-rendered static html files

webpack-static-html-versioned-images.js

var path = require('path')
var BLANK_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDOTBBOTBCMjg2NUQxMUU1QUY1Nzk5NzEyNkQzRTdCMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNUE4QzVCODg2Q0ExMUU1QUY1Nzk5NzEyNkQzRTdCMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM5MEE5MEIwODY1RDExRTVBRjU3OTk3MTI2RDNFN0IxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM5MEE5MEIxODY1RDExRTVBRjU3OTk3MTI2RDNFN0IxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAAAsAAAAAAEAAQAAAgJEAQA7'

// With the following loader config for images...
{
  test: /\.(jpe?g|png|gif)/,
  loader: 'file-loader?name=[name].[sha1:hash:hex:6].[ext]'
}

// wire up custom webpack static html plugin
compiler.plugin('emit', function (compiler, done) {
  var stats = compiler
    .getStats()
    .toJson()

  // register require handlers for images
  versionImages(stats.assets)

  // add static html pages to compiler assets
  // ...

  done()
})


function versionImages (assets) {
  // match versioned filename to build original filename
  var regex = /([^\.]+)\.([^\.]{6})\.(.+)$/

  // create a map of original filename => versioned filename
  var assetMap = assets.reduce(function (hash, asset) {
    var matches = regex.exec(asset.name)

    if (matches) {
      hash[matches[1] + '.' + matches[3]] = asset.name
    }

    return hash
  }, {})

  // require fn to return versioned filename, or blank image data uri
  function versionedImage (module, filename) {
    var name = path.basename(filename)

    module.exports = assetMap[name] ? '/' + assetMap[name] : BLANK_GIF
  }

  // Handle image requires - return the versioned filename
  require.extensions['.png'] = versionedImage
  require.extensions['.jpg'] = versionedImage
  require.extensions['.gif'] = versionedImage
}