Paketlenmiş js ve css'yi bir html şablon dosyasına enjekte etmek için webpack ve HtmlWebpackPlugin kullanıyorum.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),Ve aşağıdaki html dosyasını üretir.
<!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>Bu, uygulamanın kökünü ziyaret ederken iyi çalışıyor localhost:3000/, ancak uygulamayı başka bir URL'den ziyaret etmeye çalıştığımda başarısız oluyor, örneğin, localhost:3000/items/1paketlenen dosyalar mutlak bir yolla enjekte edilmediğinden. Html dosyası yüklendiğinde, /itemsreact-router henüz yüklenmediği için var olmayan dizinin içinde js dosyasını arayacaktır .
HtmlWebpackPlugin'in dosyaları mutlak bir yolla enjekte etmesini nasıl sağlayabilirim, bu yüzden express onları dizinimde /distdeğil dizinimin kökünde arayacaktır /dist/items/main-...min.js? Veya sorunu çözmek için ekspres sunucumu değiştirebilir miyim?
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});Esasen, şu satırı almam gerekiyor:
<script src="main...js"></script>kaynağın başında bir eğik çizgi olması.
<script src="/main...js></script>
output.publicPath = '/', çözüm eklemek oldu.