javascript - plugin - webpack doc_page src app page body body share_this_document
HtmlWebpackPlugin inyecta archivos de ruta relativa que se rompen al cargar rutas de sitios web no root (3)
De hecho, tuve que poner:
output.publicPath: ''./'';
para que funcione en una ruta no ROOT. Al mismo tiempo estaba inyectando:
baseUrl: ''./''
dentro
<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">
Con ambos parámetros establecidos, funcionó de maravilla.
Estoy usando webpack y HtmlWebpackPlugin para inyectar js y css 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 visito 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/1
porque los archivos agrupados no se inyectan con una ruta absoluta.
Cuando se carga el archivo html, buscará el archivo js dentro del directorio no existente
/items
porque react-router no se ha cargado todavía.
¿Cómo puedo obtener HtmlWebpackPlugin para inyectar los archivos con una ruta absoluta, por lo que express los buscará en la raíz de mi directorio
/dist
y no en
/dist/items/main-...min.js
?
¿O tal vez puedo 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>
tener una barra diagonal al comienzo de la fuente.
<script src="/main...js></script>
Intente configurar publicPath en la configuración de su paquete web:
output.publicPath = ''/''
HtmlWebpackPlugin usa publicPath para anteponer las URL de las inyecciones.
Otra opción es establecer la base href en el
<head>
de su plantilla html, para especificar la url base de todas las URL relativas en su documento.
<base href="http://localhost:3000/">
en la configuración del paquete web
config.output.publicPath = ''''
en su index.html
<base href="/someurl/" />
Esto debería hacerlo.