How to load images through webpack when using HTMLWebpackPlugin?

Question

I am using HTMLWebpackPlugin and in my template I have an img tag:

If you notice, here I am using a r

Answer 1

I'm not a webpack expert, but i got it to work by doing this:

Plugin config

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html'
  }),

According to the docs: https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md

By default (if you don't specify any loader in any way) a fallback lodash loader kicks in.

The <%= %> signifies a lodash template

Under the hood it is using a webpack child compilation which inherits all loaders from your main configuration.

Calling require on your img path will then call the file loader.

You may run into some path issues, but it should work.