मैं एक html टेम्पलेट फ़ाइल में बंडल किए गए js और css को इंजेक्ट करने के लिए वेबपैक और HtmlWebpackPlugin का उपयोग कर रहा हूं।
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 फ़ाइल लोड की जाती है, तो यह गैर-मौजूद /itemsनिर्देशिका के अंदर js फ़ाइल के लिए दिखेगा क्योंकि प्रतिक्रिया-राउटर अभी तक लोड नहीं हुआ है।
मैं एक पूर्ण पथ के साथ फ़ाइलों को इंजेक्ट करने के लिए HtmlWebpackPlugin कैसे प्राप्त कर सकता हूं, इसलिए एक्सप्रेस मेरी /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 = '/'समाधान था।