Tôi đang sử dụng webpack và HtmlWebpackPlugin để đưa js và css đi kèm vào tệp mẫu html.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),Và nó tạo ra tệp html sau.
<!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>Điều này hoạt động tốt khi truy cập vào thư mục gốc của ứng dụng localhost:3000/, nhưng không thành công khi tôi cố gắng truy cập ứng dụng từ một URL khác, chẳng hạn như localhost:3000/items/1vì các tệp đi kèm không được đưa vào đường dẫn tuyệt đối. Khi tệp html được tải, nó sẽ tìm tệp js bên trong thư mục không tồn tại /itemsvì react-router chưa được tải.
Làm cách nào để HtmlWebpackPlugin đưa các tệp vào một đường dẫn tuyệt đối, vì vậy express sẽ tìm kiếm chúng ở thư mục gốc của tôi /distchứ không phải tại /dist/items/main-...min.js? Hoặc có thể tôi có thể thay đổi máy chủ express của mình để khắc phục sự cố?
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});Về cơ bản, tôi chỉ cần lấy dòng:
<script src="main...js"></script>để có một dấu gạch chéo ở đầu nguồn.
<script src="/main...js></script>
output.publicPath = '/'là giải pháp.