HtmlWebpackPlugin Template Not Injecting Variables

I'm currently using Webpack (v4) and I'm having issues getting variables and html injected into the html document properly.

If I use the following configuration:

//rules
rules: [
    {
      test: /\.html$/,
      use: [{
        loader: 'html-loader',
        options: {
          minimize: false
        }
      }
  ],
//...
plugins: [
 new HtmlWebpackPlugin({
    title: 'Foo',
    template: path.resolve(__dirname, 'src/', 'index.html'),
    filename: './index.html'//relative to root of the application,
  })
]

I get the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <%= require('html-loader!./foo.html') %>
  </body>
</html>

So it looks like my variables are not being injected into the html. I have html-loader installed as well. No errors are thrown in my webpack build except for: "Entrypoint undefined = ./index.html"

However, when I swap loaders for underscore-template-loader, I get the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Foo</title>
  </head>
  <body>
 module.exports = function(obj) {
obj || (obj = {});
var __t, __p = '';
with (obj) {
__p += '<div>foo bar</div>';

}
return __p
};
</body>
</html>

According to the html-webpack-plugin examples for html-loader, my variables/partials should have been included into built html file (without the underscore-loader).

I'm not sure if the webpack-config file is setup correctly (maybe additional options/settings were applied?), but I've set up mine nearly identical and it does not result in the same output.

So end goal: get my html partial injected into the index.html as well as my variables.

Thanks in advance!