webpack:在 html 模板中使用哈希文件名

Question

我现在有 webpack 生成我的捆绑文件，名称中带有哈希值:

bundle.649c4c4e6c8076189257.cache.js

我还想出了如何让 webpack 使用 HtmlWebpackPlugin 从 html 模板生成我的主 html 页面。

这是我的问题，在我的 html 模板中，我硬编码了包文件名:

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

我宁愿有某种变量，像这样:

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

我如何用 webpack 做到这一点？

Answer 1

如果需要，html-webpack-plugin 允许您配置自己的模板，如下所述:https://github.com/ampedandwired/html-webpack-plugin#writing-your-own-templates .

但是您的用例看起来非常简单，因此您不需要它。 html-webpack-plugin 已经使用正确的命名模式为您处理放入脚本标签。因此，您可以从源索引 html 文件中省略脚本标记，并让插件插入它们。

有关详细信息，请参阅 https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates 处的 html-webpack-plugin 文档。如何配置插件以使用您的 html 文件。通常引用模板就足以达到您想要的结果。