3

What I'm trying to do is combine html-loader to copy assets referenced from html templates e.g. <img src="some/path/here.jpg" /> and file-loader to copy those html templates into the bundle folder. I do not want to embed those html files directly in the javascript bundle.

I thought this will work but it ain't:

{
    test: /\.html$/,
    loaders: ['file-loader?name=templates/[name]-[hash].[ext]', 'html-loader']
},
{
    test: /\.jpg$/,
    loader: 'file-loader?name=assets/[name]-[hash].[ext]'
}

I end up having this in my copied html template:

module.exports = "<img src=\"" + require("../img/image.jpg") + "\" />";

Any help would be much appreciated.

EDIT

to clarify.

the my html template has the following content:

<img src="../img/image.jpg" />

After running webpack the image.jpg is not copied to assets/ folder. The html template is copied to the templates/ folder but its content is:

module.exports = "<img src=\"" + require("../img/image.jpg") + "\" />";

whereas I'd like it to be:

<img src="../assets/image-webpackHashHere.jpg" />

and of course the image should be copied there under the computed name (with hash).

kamilkp
  • 9,690
  • 6
  • 37
  • 56

0 Answers0