require-patch.js

import fs from 'fs'
import { interpolateName } from 'loader-utils'

// webpack config
const publicPath = 'static'
const filenameTemplate = '[name].[hash].[ext]'
const extensions = [
  'png', 'jpg', 'jpeg', 'gif',
  'ico', 'svg', 'otf', 'eot', 'svg',
  'ttf', 'woff', 'woff2'
]

// patch require to interpolate filename
const requireHook = (context, filename) => {
  const content = fs.readFileSync(filename)
  const outputName = interpolateName(
    { resourcePath: filename },
    filenameTemplate,
    { content }
  )
  context.exports = `${publicPath}${outputName}`
}

extensions.forEach(hook => {
  if (require.extensions[`.${hook}`])
    return null

  require.extensions[`.${hook}`] = requireHook
})

usage.js

import 'require-patch' // only necessary once in entry

// elsewhere in component...
import logo from './logo.jpg'

// becomes...
var logo = require('static/logo.49da5201548ddfa0438a3a10d088eaf0.jpg')

// which matches webpack output...

/*
Hash: 9aed90340dc0202435a1
Version: webpack 2.1.0-beta.13
Time: 192ms
                                      Asset       Size  Chunks             Chunk Names
static/49da5201548ddfa0438a3a10d088eaf0.jpg     247 kB          [emitted]
...
*/

Feel free to submit this as a PR. It's awesome!