I have set up webpack and the HtmlWebpackPlugin to automatically include bundled js and css files in an html template.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
This setup generates the following html file:
<!doctype html>
<html lang="en">
<head>
...
<link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="main-295c5189923694ec44ac.min.js"></script>
</body>
</html>
Although this setup works well when accessing the application from the root URL (localhost:3000/), it encounters issues when accessed from other URLs like localhost:3000/items/1. This is because the relative paths of the injected files cause them to be searched for within non-existent directories.
To resolve this issue, I need to modify the configuration so that the files are injected with absolute paths. Alternatively, I may adjust my express server to handle the routing differently.
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
In essence, I need to ensure that the script tag:
<script src="main...js"></script>
includes a slash at the beginning of the source path:
<script src="/main...js"></script>