1

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

4

2 回答 2

9

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

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

并inject在 HtmlWebpackPlugin 选项中设置为 false。

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

<% for(var i=0; i < htmlWebpackPlugin.files.css.length; i++) {%>
    <link type="text/css" rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[i] %>">
<% } %>
于 2019-03-11T15:30:44.030 回答
-1

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

plugins: [
  new HtmlWebpackPlugin({ template: 'template.ejs', inject: 'head'}),
  new ScriptExtHtmlWebpackPlugin({ defaultAttribute: 'defer' }),
]
于 2019-03-11T16:55:44.260 回答