HtmlWebpackPlugin - 在特定位置注入 js答案

【问题标题】：HtmlWebpackPlugin - inject js in body at a specifc placeHtmlWebpackPlugin - 在特定位置注入 js
【发布时间】：2026-02-06 23:35:01
【问题描述】：

我正在使用 HtmlWebpackPlugin 将 javascript 注入到我的模板文件中：

<html>
    ...
    <body>
        ...
        <?php echo $this->inlineScript(); ?>
        <script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
    </body>
</html>

但是，我需要在 PHP 代码 <?php echo $this->inlineScript(); ?> 之前注入生成的包，以让内联脚本正常工作（它们需要 JQuery，它将在 vendor.js 中加载）。

结果应该是：

<html>
    ...
    <body>
        ...
        <script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
        <?php echo $this->inlineScript(); ?>
    </body>
</html>

有没有办法做到这一点？也许可以使用<%= htmlWebpackPlugin.options.??? %> 之类的占位符或类似的东西？如果它不能与 HtmlWebpackPlugin 一起使用，我可以使用另一个 webpack 插件吗？

【问题讨论】：

标签： javascript webpack webpack-4 html-webpack-plugin asset-management

【解决方案1】：

好的，我想通了。将以下代码放在要包含 js 文件的位置：

<% for(var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
<% } %>

并将 HtmlWebpackPlugin 选项中的 inject 设置为 false。

请记住，您还需要手动注入其他内容（css、元标记等）。 F.e. CSS：

<% for(var i=0; i < htmlWebpackPlugin.files.css.length; i++) {%>
    <link type="text/css" rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[i] %>">
<% } %>

【讨论】：

你也可以使用htmlWebpackPlugin.tags.headTags和htmlWebpackPlugin.tags.bodyTags，见example

【解决方案2】：

不确定我是否为时已晚，但您可以使用script-ext-html-webpack-plugin。这可以将脚本设置为defer，这可以推迟执行，直到解析DOM。此外，您可以在 html 的 head 中注入此脚本以开始并行获取它，但在最后执行：

plugins: [
  new HtmlWebpackPlugin({ template: 'template.ejs', inject: 'head'}),
  new ScriptExtHtmlWebpackPlugin({ defaultAttribute: 'defer' }),
]

【讨论】：

谢谢。也许也有可能（未测试）。
完全不相关。