Saya menggunakan webpack dan HtmlWebpackPlugin untuk memasukkan js dan css yang dibundel ke dalam file template html.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
Dan itu menghasilkan file html berikut.
<!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>
Ini berfungsi dengan baik saat mengunjungi root aplikasi localhost:3000/, tetapi gagal saat saya mencoba mengunjungi aplikasi dari URL lain, misalnya, localhost:3000/items/1karena file yang dibundel tidak dimasukkan dengan jalur absolut. Ketika file html dimuat, itu akan mencari file js di dalam /itemsdirektori yang tidak ada karena react-router belum dimuat.
Bagaimana saya bisa mendapatkan HtmlWebpackPlugin untuk memasukkan file dengan path absolut, jadi express akan mencarinya di root /distdirektori saya dan bukan di /dist/items/main-...min.js? Atau mungkin saya bisa mengubah server ekspres saya untuk mengatasi masalah ini?
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
Pada dasarnya, saya hanya perlu mendapatkan baris:
<script src="main...js"></script>untuk memiliki garis miring di awal sumber.
<script src="/main...js></script>
output.publicPath = '/'adalah solusinya.