[webpack-index-html-plugin] output script src prevents single-page dev server

Description

It is currently impossible to deploy and debug single-page applications because the entrypoint script’s URL is relative.

Current behaviour

In the index.html it might be <script type="module" src="./components/my-app.js"></script>.

Both in production build as well as with webpack-dev-server this will result in a relative script like <script src="./my-app.44645eba9e3994eab753.js">

This breaks single-page apps because when requesting any non-root URL like /some/virtual/path the script (as well as dynamically loaded chunks) will be fetched from /some/virtual/my-app.44645eba9e3994eab753.js which responses with a 404 status.

Expected behaviour

The generated script should be absolute. In the example above is should only mean to remove the dot => /my-app.44645eba9e3994eab753.js.

Workaround for dev server

I managed to tweak the dev server and output config to get the local server running smoothly by explicitly rewriting the entry point scripts and setting the publicPath (necessary to get correct URL to chunks):

devServer: {
  publicPath: '/',
  historyApiFallback: {
    rewrites: [{ from: /my-app.js$/, to: '/my-app.js' }],
  },
},
output: {
  publicPath: '/',
},

Apparently the only change necessary for the deployed build is to change the script paths in index.html. The chunks are otherwise already loaded correctly.

[tpluscode]

What if the plugin injected a base tag as <base href="${config.output.publicPath}"> if the tag is not otherwise present in the source index?

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Open Web Components!