Can't resolve file-loader when deploying to Heroku

Question

I'm trying to deploy a React app to Heroku. In my app I use Flag Spirtes (https://www.flag-sprites.com/), so there's a folder and image of a flag in my directory.

I've configured webpack to load it using file-loader and seems to work fine when I run the server on production mode locally. However, when I try to deploy to Heroku I get the following error:

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/flags/flags.css
remote:        Module not found: Error: Can't resolve 'file-loader' in '/tmp/build_0792dbd9d1cc095cd6dcf8783b3ad91a'
remote:        @ ./~/css-loader!./~/sass-loader/lib/loader.js!./src/flags/flags.css 6:180-202
remote:        @ ./src/flags/flags.css
remote:        @ ./src/index.js
remote:        @ multi ./src/index.js

Below is a picture of my folder directory:

And my webpack.config.js:

var webpack = require('webpack');

module.exports = {
  entry: [
    './src/index.js'
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: [/\.css$/, /\.scss$/],
        exclude: /node_modules/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    historyApiFallback: true
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
};

Very new to adding images, so could do with some newbie explanations :)