How to add URL prefix to js and css imports in index.html with webpack?

I am serving my compiled app with Tomcat. The app is not served from the root context but with a suffix - e.g. mysite.com/myapp.

I need webpack to add this myapp prefix to the js and css imports in index.html.

I need this:

<html>
<head>
  <link rel="shortcut icon" href="/myapp/favicon.ico">
  <link href="/myapp/app.9c885d75239355add0ca8f22362e289c.css" rel="stylesheet">
</head>
<body>
  <div id="root"></div>
  <script src="/myapp/vendor.1c28bcf2a2efacc7d62d.js"></script>
  <script src="/myapp/app.d678b996583f01bd2f7d.js"></script>
</body>
</html>

But right now I have this:

<html>
<head>
  <link rel="shortcut icon" href="favicon.ico">
  <link href="app.9c885d75239355add0ca8f22362e289c.css" rel="stylesheet">
</head>
<body>
  <div id="root"></div>
  <script src="vendor.1c28bcf2a2efacc7d62d.js"></script>
  <script src="app.d678b996583f01bd2f7d.js"></script>
</body>
</html>

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.

I'm using HtmlWebpackPlugin and React Redux Starter Kit.

Solution

Set

output: {
  filename: '/myapp/[name].[chunkhash].js',
  ...
},