Я использую 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каталога, потому что response-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 = '/'было решением.