HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths

Solution 1:

Try setting the publicPath in your webpack config:

output.publicPath = '/'

HtmlWebpackPlugin use the publicPath to prepend the urls of the injects.

Another option is to set the base href in the <head> of your html template, to specify the base url of all relative urls in your document.

<base href="http://localhost:3000/">

In fact, I had to put :

output.publicPath: './';

in order to have it working in a non-ROOT path. At the same time I was injecting :

   baseUrl: './'

into

<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">

With both parameter set, it worked like a charm.

in webpack config

config.output.publicPath = ''

in your index.html

<base href="/someurl/" />

this should do it.