HtmlWebpackPlugin inyecta archivos de ruta relativa que se rompen al cargar rutas de sitios web no raíz

115

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>
javascript express webpack react-router aherriot
fuente

Respuestas:

199

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 el href base 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/">
Magnus Sjungare
fuente
7
Gracias, agregar output.publicPath = '/'fue la solución.
aherriot
3
Esto no funcionará si está ejecutando un proxy inverso.
mi
4
También puede utilizar simplemente <base href="https://stackoverflow.com/">para evitar tener que codificar el nombre de host en la plantilla HTML o tener que interpolar variables.
Rafa
Tuve que configurar publicPath = '' y agregar <base href = "~ / dist /"> ya que mi sitio es un proyecto ASP.Net MVC que usa IIS y un directorio virtual.
broma más urgente
16

De hecho, tuve que poner:

output.publicPath: './';

para que funcione en una ruta no ROOT. Al mismo tiempo me inyectaba:

   baseUrl: './'

dentro 

<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">

Con ambos conjuntos de parámetros, funcionó de maravilla.

Kevin FONTAINE
fuente
Esto muestra el URLnavegador como https://localhost/myproject/%3C%=%20htmlWebpackPlugin.options.baseUrl%20%%3E#/project/1. ¿Hay alguna forma de resolver esto?
NehaM
¿Dónde está configurando baseUrl: '.'en las opciones de HtmlWebpackPlugin? { meta: { baseUrl: './' } }?
Algo el
@SomethingOn No tengo este proyecto de paquete web a mano en este momento, y creo que muchas cosas han cambiado desde que publiqué esta respuesta (incluido el valor predeterminado). Así que sí, aquí es donde debería establecerse, pero './'es el valor correcto.
Kevin FONTAINE
1
Ahora puede inyectar la etiqueta base directamente. inyectar etiqueta base
Liang
2

en la configuración del paquete web 

config.output.publicPath = ''

en su index.html 

<base href="/someurl/" />

esto debería hacerlo.

hannad rehman
fuente