title: How to add URL prefix to js and css imports in index.html with webpack?
body: <p>I am serving my compiled app with Tomcat. The app is not served from the root context but with a suffix - e.g. <code>mysite.com/myapp</code>.</p>
  
  <p>I need webpack to add this <code>myapp</code> prefix to the <code>js</code> and <code>css</code> imports in <code>index.html</code>.</p>
  
  <p>I need this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;link rel="shortcut icon" href="/myapp/favicon.ico"&gt;
    &lt;link href="/myapp/app.9c885d75239355add0ca8f22362e289c.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script src="/myapp/vendor.1c28bcf2a2efacc7d62d.js"&gt;&lt;/script&gt;
    &lt;script src="/myapp/app.d678b996583f01bd2f7d.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But right now I have this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;link rel="shortcut icon" href="favicon.ico"&gt;
    &lt;link href="app.9c885d75239355add0ca8f22362e289c.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script src="vendor.1c28bcf2a2efacc7d62d.js"&gt;&lt;/script&gt;
    &lt;script src="app.d678b996583f01bd2f7d.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>A hacky way would be to run a script during the build to change the links but I would like to have a more proper webpack solution.</p>
  
  <p>I'm using <code>HtmlWebpackPlugin</code> and <a href="https://github.com/davezuko/react-redux-starter-kit" rel="nofollow">React Redux Starter Kit</a>.</p>