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?

Answer 1

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.