Webpack Error using image-webpack-loader and url-loader in conjunction with eachother

Question

I'm trying to use url-loader and image-webpack-loader in conjunction with each other with Webpack. I have a very simple demo app with one image that I'm working with.

On npm run build, the image seems to be encoded with url-loader, and style.css updates appropriately (I think):

.hello {
  color: red;
  background: url(data:image/jpeg;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJmNmEyYmI0ODk2MjNlMjM1YTg0NDUzMGUzN2FkNjM4NC5qcGciOw==);
}

Checking this in the browser, I have

<img src="data:image/jpeg;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJmNmEyYmI0ODk2MjNlMjM1YTg0NDUzMGUzN2FkNjM4NC5qcGciOw==">

in the dom, and the sources appear to be matching, but the image doesn't actually appear, and there are no errors in the console.

I'm assuming my webpack.config.js is syntactically wrong, but not sure how to diagnose it. Here's my webpack.config.js

const path                 = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          },
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: true,
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
};