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

最佳答案

好吧,我知道了。将以下代码放在要包含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] %>">
<% } %>

关于javascript - HtmlWebpackPlugin-在特定位置的体内注入(inject)js,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55104916/

10-12 02:42