Currently, I have set historyApiFallback: true to redirect any non-existing URLs to the index page. It works perfectly for first-level routes like localhost:8080/abc. However, when attempting localhost:8080/abc/xyz, an error appears in the browser console:
http://localhost:8080/abc/scripts/bundle.js 404 (Not Found)
This is my Webpack config:
const path = require('path');
module.exports = {
entry:"./src/app.js",
output:{
path:path.join(__dirname,'public','scripts'),
filename:'bundle.js'
},
module:{
rules:[{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader'
}]
},
devServer:{
contentBase:path.join(__dirname,'public'),
publicPath:'/scripts/',
historyApiFallback: true
}
}
Below is the structure of the index page:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
hello
</div>
</body>
<script type="text/javascript" src="scripts/bundle.js"></script>
</html>
The folder structure looks like this:
-node_modules/
-public/
-scripts/
-index.html
-src/
-app.js
-package.json
-webpack.config.js
Can anyone see what might be missing here?