javascript - 我可以自定义 WebPack 插入的 'script' 标签吗？

Question

所以我是 webpack 的新手，但阅读了很多。

有一项任务我正在尝试确定它是否适用于当前代码(包括插件等)。我们使用 HtmlWebpackPlugin并为它提供一个自定义模板，要求它在关闭 body 标签附近注入(inject)脚本标签。它工作正常，但我们想要的是能够控制被注入(inject)到 html 模板中的标签。这是正在使用的默认标记:

<script src="/bundle.js"></script>

我们想要一个自定义的脚本标签内容，而不是简单的脚本标签，像这样:

<script type="text/javascript">
    var bundleUrl;
    if( document.cookie.indexOf('LOCALHOST=')== -1 ){
        bundleUrl="/bundle.js"; // just an example...
    } else {
        bundleUrl = "http://localhost:8080/42565632a54c11195088 .bundle.js"; // use localhost source...
    }
    document.write(unescape('%3Cscript src="' + bundleUrl + '"%3E%3C/script%3E'));
</script>

以上将允许动态更改的 bundleUrl，该 bundleUrl 在运行时根据 cookie 的存在而更改。

上述不能硬编码到模板中的原因是因为在生产环境中，包有一个哈希前缀...。

据我所知，我们可以实现此目的的唯一方法是扩展 HtmlWebpackPlugin，但这不太易于维护。

建议？

TIA!

临时解决方案

虽然不是最漂亮的，但它确实有效。我最终只清空了“ block ”部分并在模板中插入我的硬编码脚本标签。像这样:

plugins: [
  new HtmlWebpackPlugin({
    inject:   'body',
    template: 'my-template.html',
    filename: 'index.html',
    chunks: []
})

这实际上让 HtmlWebpackPlugin 获取源模板并对其进行转换，内部没有任何更改，只是根据需要将其作为 index.html 放置(我们的环境稍微复杂一些)。

Answer 1

您使用的是什么模板语言？我不确定你的 cookie 要求，但我最终在我的模板中使用了这个:

{! cant have the hash here when using HMR !}
<script src="js/main{?config.fileHash}.{config.fileHash}{/config.fileHash}.js"></script>

..即，如果 config.fileHash 存在则打印出来，如果不存在则不打印

这是使用 Dust.js 模板语法，但我相信您可以在其他地方做类似的事情。

在我的路由器中:

router.templateConfig = {
  fileHash: null,
};

fileHash 在产品构建时写入该配置:

router.templateConfig.fileHash = stats.toJson().hash;

(我对所有 Assets 使用了一个哈希，但您可能对每个 block 哈希使用相同的技术，尝试记录 console.log(stats.toJson())