ฉันใช้ webpack และ HtmlWebpackPlugin เพื่อฉีด js และ css ที่รวมไว้ในไฟล์เทมเพลต html
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
และสร้างไฟล์ html ต่อไปนี้
<!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>
วิธีนี้ใช้งานได้ดีเมื่อไปที่รูทของแอปlocalhost:3000/แต่ล้มเหลวเมื่อฉันพยายามเยี่ยมชมแอปจาก URL อื่นเช่นlocalhost:3000/items/1เนื่องจากไฟล์ที่รวมไม่ได้ถูกแทรกด้วยพา ธ สัมบูรณ์ เมื่อโหลดไฟล์ html ไฟล์จะค้นหาไฟล์ js ภายใน/itemsไดเร็กทอรีที่ไม่มีอยู่จริงเนื่องจาก react-router ยังไม่ได้โหลด
ฉันจะให้ HtmlWebpackPlugin ฉีดไฟล์ด้วยพา ธ สัมบูรณ์ได้อย่างไรดังนั้น Express จะมองหาไฟล์เหล่านี้ที่รูทของ/distไดเร็กทอรีของฉันไม่ใช่ที่/dist/items/main-...min.js? หรือบางทีฉันสามารถเปลี่ยนเซิร์ฟเวอร์ด่วนเพื่อแก้ไขปัญหานี้ได้
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
โดยพื้นฐานแล้วฉันต้องได้รับบรรทัด:
<script src="main...js"></script>มีเครื่องหมายทับที่จุดเริ่มต้นของแหล่งที่มา
<script src="/main...js></script>
output.publicPath = '/'เป็นทางออก