HtmlWebpackPlugin is incorrectly injecting files as relative paths (instead of absolute) #156
Comments
|
I found the solution to my issue. It works if I add |
|
@aherriot thanks you saved my day |
|
Great, thank you! Webpack configuration is vague, as usual :-) |
|
My build includes the protocol, host and even port hardcoded. That works for localhost, but as soon as I want to deploy it to a public test server. It's broken:
<!DOCTYPE html>
<html lang="de-CH">
<head>
<title>Helios</title>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,minimum-scale=1,maximum-scale=1" name="viewport">
<link href="http://localhost:8080/favicon.ico" rel="shortcut icon">
</head>
<body>
<div id="cqcanvas">
<div data-helios="" data-helios-api="/api/bot.de.json" data-helios-cta-url="https://www.axa.ch/de/formulare/beratungsanfrage.html?overwriteData=_4CGPh5MCR-PI3pYy9Vy5Us1glbOicneVALmq2Atza8" data-helios-i18n-url="/i18n/de.json" data-helios-locale="de-CH" data-prefill="{ "GENDER": "MALE", "NAME": "Test" }"></div>
</div>
<script src="http://localhost:8080/vendor.c449ece83e150f803b0b.js" type="text/javascript">
</script>
<script src="http://localhost:8080/app.c449ece83e150f803b0b.js" type="text/javascript">
</script>
</body>
</html>Instead he protocol, host and port should be omitted, because they will be automatically provided by the browser itself and correctly. |
|
Seems that |
|
@aherriot is the best answer according my situation , it will not break the hot-reload don't worry entry: {
//....
},
output: {
publicPath: '/'
} |
|
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
I am using webpack and the HtmlWebpackPlugin to inject bundled js and css into an html template file.
And it produces the following html file.
This works fine when visiting the root of the app
localhost:3000/, but fails when I try to visit the app from another URL, for example,localhost:3000/items/1because 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/itemsdirectory because react-router hasn't loaded yet.How can I get HtmlWebpackPlugin to inject the files with an absolute path, so express will look for them at the root of my
/distdirectory and not at/dist/items/main-295c5189923694ec44ac.min.js? Or maybe I can change my express server to work around the issue?The text was updated successfully, but these errors were encountered: