Я використовую 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каталогу, оскільки реакційний роутер ще не завантажений.
Як я можу змусити 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 = '/'рішення було додано.