webpack: use hash file name in html template

Question

I now have webpack generating my bunde file with a hash in the name:

bundle.649c4c4e6c8076189257.cache.js

I also have figured out how to have webpack generate my main html page from an html template using HtmlWebpackPlugin.

Here is my problem, in my html template I have the bundle file name hardcoded:

<script src="bundle.649c4c4e6c8076189257.cache.js"></script>

I would rather have some kind of variable, like this:

<script src="${bundleFileName}"></script>

How do I do this with webpack?

Thomas Gassmann · Accepted Answer · 2019-05-14 01:50:18Z

3

The html-webpack-plugin lets you configure your own templating if you need to as described here: https://github.com/ampedandwired/html-webpack-plugin#writing-your-own-templates.

But your use case looks pretty straightforward so that you should not need that. The html-webpack-plugin already handles putting in script tags for you using the correct naming pattern. So you can just omit the script tag from your source index html file and let the plugin inserting them.

For details see the html-webpack-plugin docs at https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates how to configure the plugin to use your html file. Usually it should be enough to reference the template to achieve your desired result.

edited May 14, 2019 at 1:50

Thomas Gassmann

7991 gold badge16 silver badges29 bronze badges

answered Oct 23, 2016 at 22:59

Andreas Jägle

12.4k3 gold badges33 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Muhammad Umer Over a year ago

two problems: first path in script tag, it's putting ../../../public/compiled etc into tag, /compiled/.. would have been correct. 2nd: it generates whole html boilerplate, I only want script tag which i can include somewhere in actual template that has lot more going on

Muhammad Umer Over a year ago

I'm not using default html generated by react, react is small part of the whole website, so is there a way that scans all views and update js, css, image filenames in templates (pug, handlebars)

Anthony Aguello Over a year ago

If I have two html files and I need to reference to one another but they are both being hashed by webpack? I tried referencing them like this ./index.[contenthash].htmlbut of course it dit not work

Collectives™ on Stack Overflow

webpack: use hash file name in html template

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related