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 文件中省略 script 标记，然后让插件插入它们。

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