How to get image that is within a data attrbute with Webpack 2?

Question

I am using .pug templates for my HTML and standard src attributes on my images like so:

img(src=`../images/${image}`)

Answer 1

Okay. It turns out that html-loader has an option to pass in tag / attribute types for the loader to parse through, called attrs, which is an array of these configurations.

I achieved this doing it like so:

{
  test: /\.pug$/,
  use: [
    {
      loader: 'html-loader',
      options: {
        attrs: ['img:src', 'img:data-src', 'link:href']
      }
    },
    {
      loader: 'pug-html-loader',
      options: {
        pretty: true,
        exports: false
      }
    }
  ]
}

Now running webpack -p appears to get those images.

Hope that this helps someone out sometime.

Answer 2

options can still bug with html-loader. You might need to use this instead https://webpack.js.org/plugins/loader-options-plugin/