CODEWITHSUNDEEP
webpackwebpack-pluginwebpack-html-loader
csisy
csisy

Reputation: 510

Webpack/html-loader <a> tag href resolve

I've set up aliases in my webpack config file. It works fine for JS, CSS imports and img src attributes. However I'd like to build a gallery in the HTML file with the standard lightbox setup:

<a href="~Images/foo.jpg" data-lightbox="gallery1"><img src="~Images/foo_thumb.jpg"></a>

The problem is that while the img src is resolved by the html-loader, the a href is not. Is there any setting or additional plugin that can resolve a href values?

Upvotes: 1

Views: 1657

Answers (2)

Michael Tuboltsev
Michael Tuboltsev

Reputation: 61

for webpack 5 in options add source for link tag like this

p.s. '...' in list arr is require for extend default supported tags and attributes

{
  test: /\.html$/i,
  include: path.join(__dirname, 'src/views'),
  use: {
    loader: 'html-loader',
    options: {
      esModule: false,
      sources: {
        list: [
          '...',
          {
            tag: 'a',
            attribute: 'href',
            type: 'src'
          }
        ]
      }
    }
  }
}

Upvotes: 1

csisy
csisy

Reputation: 510

It seems that it's enough to add the a href to the list of supported attributes of the html-loader plugin. So in the webpack config:

{
  test: /\.html$/,
  loader: 'html-loader',
  options: {
    attributes: {
      // ...
      {
        tag: 'a',
        attribute: 'href',
        type: 'src'
      }
    }
  }
}

Upvotes: 0

Related Questions