Estou usando o webpack e o HtmlWebpackPlugin para injetar js e css empacotados em um arquivo de modelo html.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),E produz o seguinte arquivo 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>Isso funciona bem ao visitar a raiz do aplicativo localhost:3000/, mas falha quando tento visitar o aplicativo de outra URL, por exemplo, localhost:3000/items/1porque os arquivos agrupados não são injetados com um caminho absoluto. Quando o arquivo html for carregado, ele procurará o arquivo js dentro do /itemsdiretório inexistente porque o react-router ainda não foi carregado.
Como posso fazer com que o HtmlWebpackPlugin injete os arquivos com um caminho absoluto, para que o express os procure na raiz do meu /distdiretório e não em /dist/items/main-...min.js? Ou talvez eu possa alterar meu servidor expresso para solucionar o problema?
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});Basicamente, eu só preciso pegar a linha:
<script src="main...js"></script>para ter uma barra no início da fonte.
<script src="/main...js></script>
output.publicPath = '/'foi a solução.