HtmlWebpackPlugin - 在特定位置注入 js

Question

我正在使用 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 插件吗？

Answer 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] %>">
<% } %>

Answer 2

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

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

HtmlWebpackPlugin - 在特定位置注入 js

HtmlWebpackPlugin - inject js in body at a specifc place

javascript

webpack

webpack-4

html-webpack-plugin

asset-management