HtmlWebpackPlugin - внедрить js в тело в указанном месте - PullRequest
Новая
       41

HtmlWebpackPlugin - внедрить js в тело в указанном месте

0 голосов
/ 11 марта 2019

Я использую 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, который я могу использовать?

Ответы [ 2 ]

0 голосов
/ 11 марта 2019

Не уверен, что я опоздал, но вы можете использовать script-ext-html-webpack-plugin . Это может установить сценарий как defer, который может отложить выполнение до анализа DOM. Кроме того, вы можете внедрить этот скрипт в head html, чтобы начать его параллельную загрузку, но выполнить в конце: 

plugins: [
  new HtmlWebpackPlugin({ template: 'template.ejs', inject: 'head'}),
  new ScriptExtHtmlWebpackPlugin({ defaultAttribute: 'defer' }),
]
0 голосов
/ 11 марта 2019

Хорошо, я понял это.Поместите следующий код, куда вы хотите включить свои 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, meta tags и т. д.) тоже вручную.Например, CSS: 

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