আমি ওয়েবপ্যাক এবং এইচটিএমএল ওয়েবপ্যাকপ্লাগইনটি এইচটিএমএল টেমপ্লেট ফাইলে বান্ডিল্ড জেএস এবং সিএসএস ইনজেক্ট করতে ব্যবহার করছি।
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.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/, তবে আমি অন্য ইউআরএল থেকে অ্যাপটি দেখার চেষ্টা করার পরে ব্যর্থ হয়েছি, উদাহরণস্বরূপ, localhost:3000/items/1কারণ বান্ডিলযুক্ত ফাইলগুলি পরম পাথ দিয়ে ইনজেকশনের নয়। এইচটিএমএল ফাইলটি লোড হয়ে গেলে, এটি অস্তিত্বহীন /itemsডিরেক্টরিতে থাকা জেএস ফাইলের সন্ধান করবে কারণ প্রতিক্রিয়া-রাউটারটি এখনও লোড হয়নি।
আমি কীভাবে এইচটিএমএল ওয়েবপ্যাকপ্লাগিন পেতে পারি যাতে পরম পাথ দিয়ে ফাইলগুলি ইনজেক্ট করতে হয়, তাই এক্সপ্রেসগুলি আমার /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 = '/'করার সমাধান ছিল।