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注入体内

2 个答案: