HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths
<p>I am using webpack and the HtmlWebpackPlugin to inject bundled js and css into an html template file.</p>

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

<p>And it produces the following html file.</p>

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

<p>This works fine when visiting the root of the app <code>localhost:3000/</code>, but fails when I try to visit the app from another URL, for example, <code>localhost:3000/items/1</code> 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 <code>/items</code> directory because react-router hasn't loaded yet.</p>

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

<pre><code>app.use(express.static(__dirname + '/../dist'));

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

<p>Essentially, I just need to get the line:</p>

<pre><code>&lt;script src="main...js"&gt;&lt;/script&gt;
</code></pre>

<p>to have a slash at the start of the source.</p>

<pre><code>&lt;script src="/main...js&gt;&lt;/script&gt;
</code></pre>