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

Question

I am using webpack and the HtmlWebpackPlugin to inject bundled js and css into an html template file.

new HtmlWebpackPlugin({
   template: 'client/index.tpl.html',
   inject: 'body',
   filename: 'index.html'
}),

And it produces the following html file.

<!doctype html>
<html lang="en">
  <head>
    ...
    <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="main-295c5189923694ec44ac.min.js"></script>
  </body>
</html>

This works fine when visiting the root of the app localhost:3000/, but fails when I try to visit the app from another URL, for example, localhost:3000/items/1 because the bundled files are not injected with an absolute path. When the html file is loaded, it will look for the js file inside the non-exist /items directory because react-router hasn't loaded yet.

How can I get HtmlWebpackPlugin to inject the files with an absolute path, so express will look for them at the root of my /dist directory and not at /dist/items/main-...min.js? Or maybe I can change my express server to work around the issue?

app.use(express.static(__dirname + '/../dist'));

app.get('*', function response(req, res) {
  res.sendFile(path.join(__dirname, '../dist/index.html'));
});

Essentially, I just need to get the line:

<script src="main...js"></script>

to have a slash at the start of the source.

<script src="/main...js></script>

score 254 · Accepted Answer · edited Aug 09 '17 at 03:13

254

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/">

edited Aug 09 '17 at 03:13

Rafa Viotti

9,998
4
42
62

answered Jan 06 '16 at 07:47

Magnus Sjungare

2,556
1
10
3

9

Thank you, adding `output.publicPath = '/'` was the solution. – aherriot Jan 06 '16 at 14:05
5

This will not work if you're running behind reverse proxy. – t-my Aug 29 '16 at 09:19
6

You could also use simply `` to avoid having to hardcode the host name in the HTML template, or having to interpolate variables. – Rafa Viotti Aug 09 '17 at 03:18
I had to set publicPath = '' and add since my site is a ASP.Net MVC project using IIS and a virtual directory. – more urgent jest Oct 24 '19 at 10:06
Lead me in the right direction. Setting `publicPath` to `""` (an empty string) worked to fix my problem. – skaz Jan 06 '21 at 19:30

Kevin FONTAINE · Answer 2 · 2016-12-01T09:34:59.610

22

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.

edited Dec 01 '16 at 09:34

answered Dec 01 '16 at 09:26

Kevin FONTAINE

845
8
17

This shows the `URL` on browser as `https://localhost/myproject/%3C%=%20htmlWebpackPlugin.options.baseUrl%20%%3E#/project/1`. Is there any way to solve this? – NehaM Oct 06 '17 at 10:59
Where are you setting `baseUrl: '.'` is it in the HtmlWebpackPlugin options? `{ meta: { baseUrl: './' } }`? – SomethingOn Dec 10 '18 at 16:23
@SomethingOn I don't have this webpack project on hand right now, and I think a lot of things have changed since I posted this answer (including default value). So yes, this is certainly where it should be set, but `'./'` is the correct value. – Kevin FONTAINE Dec 11 '18 at 08:46
1

Now It can inject base tag directly. [inject base tag](https://github.com/jantimon/html-webpack-plugin#base-tag) – Liang May 14 '20 at 03:46
Dumb but really effective 2nd approach. Thanks! – cpinamtz Aug 08 '21 at 12:05

hannad rehman · Answer 3 · 2018-07-23T13:33:47.640

9

in webpack config

config.output.publicPath = ''

in your index.html

<base href="/someurl/" />

this should do it.

edited Jul 23 '18 at 13:33

answered Jul 23 '18 at 13:26

hannad rehman

4,133
3
33
55

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

3 Answers3

Linked