Support <link href=""/> #17

natew · 2015-02-26T21:10:48Z

Wanting to use it with a template that has this in the head tag:

<link rel="apple-touch-icon" href="icon.png"/>

But it doesn't seem to pick it up! The syntax seems simple enough to add.. want a pull request?

The text was updated successfully, but these errors were encountered:

natew · 2015-02-26T21:19:17Z

Ok, so getting interesting results. I'd like this:

./layout.html
./icon.png
./main.js

layout:

<!DOCTYPE html>
<html>
<head>
  <link rel="apple-touch-icon" href="icon.png"/>
</head>
<body></body>
</html>

main.js

 require('./layout.html');

loader:

  { test: /\.html$/, loader: 'html-loader!file-loader?name=index.html' }

And the output to be:

index.html
XXXX.png

where index.html has the path to the icon properly inserted.

But I've tried a variety of combinations. Without the file-loader it outputs the icon.png but no layout. With file-loader the layout but no icon.

sokra · 2015-02-26T21:58:19Z

You cannot combine html-loader and file-loader this way.

You can send a PR adding this syntax, but restrict it to known rels as not every link should be processed.

natew · 2015-02-26T22:31:57Z

I can't get the build to output the html and the png together, even without file-loader renaming. That should be possible, right? Even just using <img src="icon.png" /> it just outputs the html file.

cbrewer1689 · 2015-05-08T21:35:25Z

+1

jhnns · 2015-05-13T10:00:45Z

👍

choonkending · 2015-06-11T12:10:09Z

👍

shprink · 2015-06-21T04:11:18Z

+1

nmabhinandan · 2015-07-07T11:40:33Z

+1

ivanmayes · 2015-07-09T15:38:04Z

+1

iDVB · 2015-08-29T19:35:55Z

+1

mlegenhausen · 2015-11-20T16:44:54Z

+1

ehgoodenough · 2015-12-05T05:09:32Z

+1

choonkending · 2015-12-05T05:27:34Z

Just for reference, I ended up using react helmet in my solutions. :)

mxstbr · 2016-01-12T08:10:32Z

👍

Also, what about <meta property="og:image" content="someimage.jpg" />?

jhnns · 2016-01-12T09:36:46Z

Sounds reasonable. We probably need a more configurable solution. I think, there is an infinite number of possible tags which reference other files :)

mxstbr · 2016-01-12T10:02:52Z

Very true, a custom function that gets passed all the tags would be really nice! (Similar to how postcss works maybe?)

@jantimon

This is still a prerelease, but it's almost finished so updating it on this branch is no problem. Thanks to @jantimon for the amazing work. v2 lets you load html files with loaders, so we now use html-loader to load the index.html file, which automatically require()s all img tags specified in the HTML file. This doesn't yet solve the meta image problem, but I've added to an issue in the html-loader repo and hope that this will be resolved soon! See webpack-contrib/html-loader#17

tikhonbelousko · 2016-01-17T13:15:52Z

Currently I'm doing the following trick:

{
  test: /\.html$/,
  loader: ExtractTextPlugin.extract('html?attrs=link:href')
},

mxstbr · 2016-01-17T13:17:30Z

@dazzz I'm pretty sure that's not a trick, that's intended usage of that option, but we need a better solution for tags like <meta property="og:image" content="someimage.jpg" />.

resistdesign · 2016-03-11T05:44:49Z

+1

vbarbarosh · 2016-08-19T14:46:47Z

Until there is no other solution, interpolation syntax may be used (with interpolate flag turned on):

<link rel="shortcut icon" href="${require('./favicon.ico')}">
<meta property="og:image" content="${require('./someimage.jpg')}" />

And, of course, loaders should be configured appropriately:

...
module: {
    loaders: [
        ...
        {
            test: /\.(ico|png|eot|svg|ttf|woff|woff2)$/,
            loader: 'file?name=[name]-[hash:6].[ext]'
        },
        ...
    ]
},
...

michael-ciniawsky · 2016-08-19T15:50:47Z

posthtml maybe :) ?

resistdesign · 2016-08-20T13:33:29Z

@vbarbarosh That's actually pretty interesting, what is the result like?

vbarbarosh · 2016-08-20T16:30:55Z

@resistdesign As expected: ./favicon.ico and ./someimage.jpg will be copied into the destination directory, and the whole expression will be replaced by path to the file (e.g. ${require('./favicon.ico')} will be replaced by favicon-123456.ico).

gaearon · 2016-09-17T20:36:25Z

Can we add an option to treat all attribute values starting with ./ as ones to be resolved by loaders?
Or even make it a default.
I imagine this would satisfy most use cases without explicit attribute whitelists unless I’m missing something.

resistdesign · 2016-09-18T06:49:06Z

@gaearon Interesting, does that work for icons, js, css, manifest and all that? It just might. You have to also consider ../ and things like that in case of relative paths, but I guess you could still have ./../ which is wonky but should work.

So what would be the result, it would run the file through a loader and return the new path/URL? The loader CAN'T return code or content because the result will be set as the value of an attribute. I mean it could be a data URL but that seems problematic for code and such I would think.

jhnns · 2016-10-03T13:21:56Z

Currently, we have a mixture between sane defaults (all src attributes) and additional opt-ins. @gaearon 's suggestion is to extend the sane default to all attribute values that look like a path. We can make the pattern a little bit smarter, for instance, we could also enforce a file extension at the end of the path (like \.[a-z]{3,4}$).

This would be nice, because it reduces the need to configure things and many instances will just work out of the box. But we would still need to provide a way to exclude certain attributes because there are always exceptions and people will come and say: "Oh, webpack should not handle these kind of attributes".

gaearon · 2016-10-04T08:50:13Z

FYI we decided to stop using html-loader completely and just tell people to maintain a "public" folder for assets that go with HTML. Worked great for us.

The biggest issue I couldn't figure out how to resolve are JSON files. When used in <link> I want them to be treated as files, not JS modules. On the other hand I don't want user to write !!file!./something.json. So I decided the whole abstraction is leaky for our use case, and dropped it.

jhnns · 2016-10-04T16:19:00Z

Totally understandable. It doesn't make sense to handle JSONs as javascript modules when referenced from an HTML file. Sometimes, it makes sense to express that as a directory-specific rule (like "all JSONs inside this directory should be emitted as separate files"), but the current way of configuring loaders lacks this type of expression.

jhnns · 2016-10-11T16:32:40Z

Webpack 2 has more powerful way to configure these loader rules. Now you can define loader rules based on the "issuer" which is the module that contains the import statement. Your use-case would be solved like this:

module: {
    rules: [
        {
            test: /\.json$/,
            issuer: /\.html$/,
            loader: "file-loader"
        }
    ]
}

gaearon · 2016-10-11T17:45:34Z

Very neat.

7kms · 2016-12-19T06:48:10Z

I have solve it like this,but not pure html-loader,I make it with html-webpack-plugin

<link rel="apple-touch-icon" sizes="114*114" href="<%= require('../assets/images/logo.png') %>">
<link rel="icon" type="image/x-icon" href="<%= require('../assets/images/favicon.ico') %>" sizes="48x48">

loaders =  [
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    exclude: '/nolimit/',                
    loader: 'url-loader',
     query: {
           limit: 10,
           name: utils.assetsPath('img/[name].[hash:6].[ext]')
                }
     },
 {
      test: /.(ico)$/,
      loader: 'file?name=[name].[hash:6].[ext]'
 }
]

then the finally rendered html like this

<link rel="apple-touch-icon" sizes="114*114" href="static/img/logo.32893a.png">	
<link rel="icon" type="image/x-icon" href="favicon.aacd9e.ico" sizes="48x48">

ChristianUlbrich · 2017-01-14T20:04:28Z

@baotang I doubt this will work with the html-loader. For it to work set interpolate: 'require' option and use ${require('./image.png')}:

somehwere in the WebPack config:

module: {
      loaders: [
        
     //..
        {
          test: /\.html$/,
          loader: 'html',
          query: {
            interpolate: 'require'
          }
     ] //..
    }

And then:

<link rel="apple-touch-icon" sizes="114*114" href="${require('static/img/logo.32893a.png')">	
<link rel="icon" type="image/x-icon" href="${require('favicon.aacd9e.ico')" sizes="48x48">

This works for me.

Dixin · 2017-09-23T22:08:41Z

I came here from google.

https://www.npmjs.com/package/html-loader

attrs: ['img:src', 'link:href']

@jantimon

This is still a prerelease, but it's almost finished so updating it on this branch is no problem. Thanks to @jantimon for the amazing work. v2 lets you load html files with loaders, so we now use html-loader to load the index.html file, which automatically require()s all img tags specified in the HTML file. This doesn't yet solve the meta image problem, but I've added to an issue in the html-loader repo and hope that this will be resolved soon! See webpack-contrib/html-loader#17

michael-ciniawsky · 2018-02-06T03:58:39Z

https://github.com/webpack-contrib/html-loader/releases/tag/v1.0.0-alpha.0

By default `html-loader@0.x` has a default `attrs` of `['img:src']`, which means only `<img src="...">` tags are followed when parsing the HTML: https://github.com/webpack-contrib/html-loader/blob/v0.5.5/README.md#usage https://github.com/webpack-contrib/html-loader/blob/v0.5.5/index.js#L29 With this change, favicons are included too, and have all the benefits of being included in the webpack build - such as being being inlined by url-loader (if small enough), or else being copied to the output directory automatically and given hashed filenames. This matches the default that will be used in `html-loader` v1.0.0: webpack-contrib/html-loader#17 ...and saves projects from having to resort to the manual Neutrino API to adjust the options used by `html-loader` (see #865).

@jantimon

This is still a prerelease, but it's almost finished so updating it on this branch is no problem. Thanks to @jantimon for the amazing work. v2 lets you load html files with loaders, so we now use html-loader to load the index.html file, which automatically require()s all img tags specified in the HTML file. This doesn't yet solve the meta image problem, but I've added to an issue in the html-loader repo and hope that this will be resolved soon! See webpack-contrib/html-loader#17

ChoppinBlockParty · 2020-11-03T16:29:51Z

Hi, it is not very clear to me, is link:href supported? I am trying

    <link rel="icon" type="image/x-icon" href="./favicon.ico" >

But does not get picked up by webpack.

ChoppinBlockParty · 2020-11-06T19:09:47Z

I have all the suggestions from this topic, none has worked. Probably it is because I am on webpack 5, and many things have changed since then. I have ended up adding link:href to the attributes, works fine. I just wonder why it is not added by default, what was the concern there?

trullock · 2020-11-28T13:29:10Z

@ChoppinBlockParty could you humour me with the complete webpack config snippet I need to do this using todays tool versions? Thanks

dkrasnove · 2021-02-09T01:14:01Z

@trullock, and for anybody who may come across this in the future if it hasn't been fixed, this works as of webpack 5.21.2:

{
    test: /\.html$/i,
    loader: 'html-loader',
    options: {
      attributes: {
        list: [
          '...',
          {
            tag: 'link',
            attribute: 'href',
            type: 'src',
          }
        ]
      }
   }
}

@jantimon

This is still a prerelease, but it's almost finished so updating it on this branch is no problem. Thanks to @jantimon for the amazing work. v2 lets you load html files with loaders, so we now use html-loader to load the index.html file, which automatically require()s all img tags specified in the HTML file. This doesn't yet solve the meta image problem, but I've added to an issue in the html-loader repo and hope that this will be resolved soon! See webpack-contrib/html-loader#17

@jantimon

This is still a prerelease, but it's almost finished so updating it on this branch is no problem. Thanks to @jantimon for the amazing work. v2 lets you load html files with loaders, so we now use html-loader to load the index.html file, which automatically require()s all img tags specified in the HTML file. This doesn't yet solve the meta image problem, but I've added to an issue in the html-loader repo and hope that this will be resolved soon! See webpack-contrib/html-loader#17

@jantimon

This is still a prerelease, but it's almost finished so updating it on this branch is no problem. Thanks to @jantimon for the amazing work. v2 lets you load html files with loaders, so we now use html-loader to load the index.html file, which automatically require()s all img tags specified in the HTML file. This doesn't yet solve the meta image problem, but I've added to an issue in the html-loader repo and hope that this will be resolved soon! See webpack-contrib/html-loader#17

@jantimon

This is still a prerelease, but it's almost finished so updating it on this branch is no problem. Thanks to @jantimon for the amazing work. v2 lets you load html files with loaders, so we now use html-loader to load the index.html file, which automatically require()s all img tags specified in the HTML file. This doesn't yet solve the meta image problem, but I've added to an issue in the html-loader repo and hope that this will be resolved soon! See webpack-contrib/html-loader#17

@jantimon

This is still a prerelease, but it's almost finished so updating it on this branch is no problem. Thanks to @jantimon for the amazing work. v2 lets you load html files with loaders, so we now use html-loader to load the index.html file, which automatically require()s all img tags specified in the HTML file. This doesn't yet solve the meta image problem, but I've added to an issue in the html-loader repo and hope that this will be resolved soon! See webpack-contrib/html-loader#17

@jantimon

This is still a prerelease, but it's almost finished so updating it on this branch is no problem. Thanks to @jantimon for the amazing work. v2 lets you load html files with loaders, so we now use html-loader to load the index.html file, which automatically require()s all img tags specified in the HTML file. This doesn't yet solve the meta image problem, but I've added to an issue in the html-loader repo and hope that this will be resolved soon! See webpack-contrib/html-loader#17

@jantimon

This is still a prerelease, but it's almost finished so updating it on this branch is no problem. Thanks to @jantimon for the amazing work. v2 lets you load html files with loaders, so we now use html-loader to load the index.html file, which automatically require()s all img tags specified in the HTML file. This doesn't yet solve the meta image problem, but I've added to an issue in the html-loader repo and hope that this will be resolved soon! See webpack-contrib/html-loader#17

hemanth added the enhancement label Sep 7, 2016

roadmanfong mentioned this issue Sep 10, 2016

Meta tag with image url content facebook/create-react-app#618

Closed

hemanth mentioned this issue Sep 13, 2016

TODO for v1.0.0 #89

Closed

4 tasks

michael-ciniawsky added type: Feature and removed enhancement labels Apr 9, 2017

michael-ciniawsky self-assigned this Apr 9, 2017

edmorley mentioned this issue Jan 23, 2018

refactor(loader): v1.0.0 #155

Closed

1 task

michael-ciniawsky closed this as completed Feb 6, 2018

michael-ciniawsky added this to the 1.0.0 milestone Feb 6, 2018

edmorley mentioned this issue Jun 7, 2018

html-loader: Add 'link:href' to attrs so favicons are parsed neutrinojs/neutrino#943

Merged

Support <link href=""/> #17

Support <link href=""/> #17

Comments

natew commented Feb 26, 2015

natew commented Feb 26, 2015

sokra commented Feb 26, 2015

natew commented Feb 26, 2015

cbrewer1689 commented May 8, 2015

jhnns commented May 13, 2015

choonkending commented Jun 11, 2015

shprink commented Jun 21, 2015

nmabhinandan commented Jul 7, 2015

ivanmayes commented Jul 9, 2015

iDVB commented Aug 29, 2015

mlegenhausen commented Nov 20, 2015

ehgoodenough commented Dec 5, 2015

choonkending commented Dec 5, 2015

mxstbr commented Jan 12, 2016

jhnns commented Jan 12, 2016

mxstbr commented Jan 12, 2016

tikhonbelousko commented Jan 17, 2016

mxstbr commented Jan 17, 2016

resistdesign commented Mar 11, 2016

vbarbarosh commented Aug 19, 2016 • edited Loading

michael-ciniawsky commented Aug 19, 2016 • edited Loading

resistdesign commented Aug 20, 2016

vbarbarosh commented Aug 20, 2016

gaearon commented Sep 17, 2016

resistdesign commented Sep 18, 2016

jhnns commented Oct 3, 2016

gaearon commented Oct 4, 2016

jhnns commented Oct 4, 2016

jhnns commented Oct 11, 2016 • edited Loading

gaearon commented Oct 11, 2016

7kms commented Dec 19, 2016 • edited Loading

ChristianUlbrich commented Jan 14, 2017 • edited Loading

Dixin commented Sep 23, 2017

michael-ciniawsky commented Feb 6, 2018

ChoppinBlockParty commented Nov 3, 2020

ChoppinBlockParty commented Nov 6, 2020

trullock commented Nov 28, 2020

dkrasnove commented Feb 9, 2021

vbarbarosh commented Aug 19, 2016 •

edited

Loading

michael-ciniawsky commented Aug 19, 2016 •

edited

Loading

jhnns commented Oct 11, 2016 •

edited

Loading

7kms commented Dec 19, 2016 •

edited

Loading

ChristianUlbrich commented Jan 14, 2017 •

edited

Loading