title: HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths
body: <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>