Support opt-out the automatically added trailing slash for publicPath

[weareoutman]

Is your feature request related to a problem? Please describe.
I want to set my publicPath to something like <!--# echo var='public_path' default='' -->, which is a nginx ssi expression.

I have a config like:

new HtmlWebpackPlugin({
  filename: "index.html",
  publicPath: "<!--# echo var='public_path' default='' -->",
}),

I want the output html to be like:

<script src="<!--# echo var='core_root' default='' -->main.js"></script>

But it automatically added a trailing slash for the publicPath, it output:

<script src="<!--# echo var='core_root' default='' -->/main.js"></script>
                                                      ^

Describe the solution you'd like

It would be nice to have an option to opt-out the automatically added trailing slash for publicPath.

Something like:

new HtmlWebpackPlugin({
  filename: "index.html",
  publicPath: "<!--# echo var='public_path' default='' -->",
  publicPathTrailingSlash: false,
}),

P.S. I am using webpack v4 along with html-webpack-plugin v4, so supports it in v4 would be nice, thank you.

[jantimon]

This is already possible. You can set inject: false, to disable automatic script injection.

The next step is to add the script tags manually e.g.:

<%= htmlWebpackPlugin
  .tags
  .headTags
%>

You can also modify those tags:

<%= htmlWebpackPlugin
  .tags
  .headTags
  .map((tag) => {
     // your custom logic goes here
     return tag
   })
  .join('') 
%>

https://github.com/jantimon/html-webpack-plugin/tree/main/examples/custom-insertion-position

[weareoutman]

Thanks for the workaround and it works as my expectation, though it requires dozens of lines of code 🤣

[jantimon]

5 lines?

[weareoutman]

I don't know whether I am doing right, but my code is like:

    <%= htmlWebpackPlugin
      .tags
      .headTags
      .map((tag) => {
        if (tag.tagName === "link" && tag.attributes.rel === "stylesheet") {
            return {
              ...tag,
              attributes: {
                ...tag.attributes,
                href: `${coreRootPlaceholder}${tag.attributes.href}`,
              }
            }
          }
      })
      .join('')
    %>

    <%= htmlWebpackPlugin
      .tags
      .bodyTags
      .map((tag) => {
        if (tag.tagName === "script") {
            return {
              ...tag,
              attributes: {
                ...tag.attributes,
                src: `${coreRootPlaceholder}${tag.attributes.src}`,
              }
            }
          }
        })
      .join('')
    %>