webpack server side rendering with file loader (ie: require()'d images)

loaderHook.js

const fs = require('fs')
const utils = require('loader-utils')

const defaultOptions = {
  extensions: ['.png', '.jpg'],
  filePrefix: 'img/img-',
  hashLength: 6
}

module.exports = function (options) {
  options = extendDefaults(options)

  const { extensions } = options

  extensions.forEach(ext => {
    require.extensions[ext] = requireFile.bind({ options }, ext)
  })
}

function requireFile (ext, nodeModule) {
  const { id } = nodeModule
  const { filePrefix, hashLength } = this.options
  const buffer = fs.readFileSync(id)
  const hash = utils.getHashDigest(buffer).substr(0, hashLength)
  const bundlePath = `${filePrefix}${hash}${ext}`
  nodeModule.exports = bundlePath
}

function extendDefaults (options) {
  return Object.assign({}, defaultOptions, options || {})
}

webpack-server-file-loader.md

Usage

require('./loaderHook')() before any require statements with the non-js files you're looking to load.

Loader hook can take an options object, of which the defaults are:

{
  extensions: ['.png', '.jpg'],
  filePrefix: 'img/img-',
  hashLength: 6
}

What it does

Establishes the module exports for the provided file extensions so that requiring those files will return the hashed file path.

Todo

Should leverage webpack config for loader so that exported path matches what's generated by the bundle.