CODEWITHSUNDEEP
javascripthtmlwebpackwebpack-dev-server
Ville Miekk-oja
Ville Miekk-oja

Reputation: 20925

How to change webpack dev-server output publicPath relative to root

I have a webpack configuration, which outputs file in this format:

<!doctype html><html lang="en">
<head><title>Test</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<link href="/app.d4748ed7545c989488198e70fba64ba6.css" rel="stylesheet">
</head>
<body><div id="root" style="height: 100%"></div>
 <script type="text/javascript" src="/vendor.8ef0f4df1a333e035c4d.js">
 </script><script type="text/javascript" src="/app.396d1daa0b3c37c76831.js">
 </script>
</body>
</html>

The part I'm interested in is the serving of static files. Currently it serves them like so: src="/vendor.8ef0f4df1a333e035c4d.js".

How could I use the webpack to serve those files relatively, like so: src="vendor.8ef0f4df1a333e035c4d.js"?

Where to put that in the webpack config? I'm also using code splitting through require.ensure. Do I need to modify those parts as well? Please help!

Upvotes: 1

Views: 2047

Answers (1)

devinm
devinm

Reputation: 865

From my understanding of the webpack-4 documentation for output.publicPath, if you set output.publicPath to be the empty string (i.e. output.publicPath: ''), that should result in all paths being resolved to relative to the HTML-document, which seems to be the behavior you are interested in.

The excerpt from the documentation I am drawing on is here:

enter image description here

Upvotes: 2

Related Questions