How to use <base href> and src="./foo"?

[benneq]

Using Webpack 1.13.2 , html-loader 0.4.3 on OSX.
I'm migrating an app to Webpack and now need to use the html-loader with ngtemplate-loader.

The index.html has set <base href="/foo/" />
And all our internal links and image sources start with ./.

For example: /folder/partial.html contains <img src="./bar/baz.png">
Though the browser will read the image from /foo/bar/baz.png

I guess that html-loader doesn't know about the base href and now tries to search for the image in /folder/bar/baz.png.

Is it somehow possible to tell html-loader about the base href?

[andreicek]

I guess that html-loader doesn't know about the base href and now tries to search for the image in /folder/bar/baz.png.

The statement is entirely correct. The html-loader will attempt to resolve the file with the path specified in the src here.

I am not entirely sure what would be the expected behavior here since html-loader will resolve the requested resources and render the base statement useless and moreover wrong since the file is resolved in the directory set up in Webpack.

What could be done is modifying the source against the specified base but afterward removing it from the document. But again this would directly influence the document if you used the same directive for links.

I would love to have more eyes on this issue before making any changes.

[benneq]

I guess it would be nice/enough to have some kind of base option, so I can use something like html-loader?base=/foo/!./folder/partial.html. Then it could read all URLs according to the HTML specification. If the new base option isn't set, the html-loader will behave like before.

When using the base option, the html-loader should use the given context from webpack.config.js as root, then append the base value, and then the relative URL from any a href or img src.

Example:
context: __dirname + "/app"
html-loader?base=/foo/!./folder/partial.html
within partial.html: <img src="./bar/baz.png">
Then it will find the image here: __dirname + "/app/foo/bar/baz.png"

What do you think about this?

[andreicek]

With base being definable outside of DOM I can agree wholeheartedly. But maybe the better feature would be implementing support for https://webpack.github.io/docs/configuration.html#resolve. IMHO it would be more in the Webpack spirit.

And would solve the issue you are having.

[benneq]

I'm quite new to Webpack and I don't know how resolve works. I just wanted to highlight, that context is not equal to <base href=...> in my case. So it must be possible to get context + base as the base directory for resolving html files and images.

Basically it really doesn't matter to me if it's solved using resolve, some base option or whatever. I just don't want break other people's code because of this one small feature. 😃

[michael-ciniawsky]

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