search

architgarg / html-webpack-injector

Plugin that simplifies injection of chunks into head and body using HtmlWebpackPlugin (with ability to provide async/defer)
29 stars 11 forks source link

Using the html-webpack-plugin 'headTags' property in a template outputs duplicate script tags #9

Closed CalMlynarczyk closed 4 years ago

CalMlynarczyk commented 4 years ago

Say I want to tweak the placement of the injected script tags in my HTML template rather than having it always go to the end of the head element. I configure an entry point to inject into the head tag as documented:

{
  entry: {
    index_head: ['./index.js'],
  },
  plugins: {
    new HtmlWebpackInjector(),
  },
}

Then I add the html-webpack-plugin tags property like so:

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <%= htmlWebpackPlugin.tags.headTags %>
    <title>My Site</title>
  </head>
...
</html>

However, the output HTML file includes duplicates of that script tag, whereas I would expect it to only show up once. It still adds a script element at the end of the head element.

Expected

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="index_head.js"></script>
    <title>My Site</title>
  </head>
...
</html>

Actual

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="index_head.js"></script>
    <title>My Site</title>
    <script src="index_head.js"></script>
  </head>
...
</html>
CalMlynarczyk commented 4 years ago

After more investigation, I've determined this issue is not caused by this plugin. I needed to set inject: false in the html-webpack-plugin configuration and manually add the tag template variables in the templates.