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

Question

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.

Juho Vepsäläinen · Accepted Answer · 2016-03-23 08:20:10Z

1

Set

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

answered Mar 23, 2016 at 8:20

Juho Vepsäläinen

27k13 gold badges83 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

0xh8h · Accepted Answer · 2020-08-25 06:49:38Z

1

I guess we can also use Webpack publicPath

output: {
  publicPath: '/myapp/',
  ...
},

answered Aug 25, 2020 at 6:49

0xh8h

3,5994 gold badges41 silver badges58 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related