Estoy usando webpack y HtmlWebpackPlugin para inyectar js y css incluidos en un archivo de plantilla html.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),Y produce el siguiente archivo 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>Esto funciona bien cuando se visita la raíz de la aplicación localhost:3000/, pero falla cuando intento visitar la aplicación desde otra URL, por ejemplo, localhost:3000/items/1porque los archivos incluidos no se inyectan con una ruta absoluta. Cuando se carga el archivo html, buscará el archivo js dentro del /itemsdirectorio no existente porque react-router aún no se ha cargado.
¿Cómo puedo hacer que HtmlWebpackPlugin inyecte los archivos con una ruta absoluta, para que express los busque en la raíz de mi /distdirectorio y no en /dist/items/main-...min.js? ¿O tal vez pueda cambiar mi servidor express para solucionar el problema?
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});Esencialmente, solo necesito obtener la línea:
<script src="main...js"></script>para tener una barra al comienzo de la fuente.
<script src="/main...js></script>
output.publicPath = '/'fue la solución.