Búsqueda de sitios web

javascript - HtmlWebpackPlugin inyecta archivos con rutas relativas, lo que falla al cargar rutas de sitios web que no están en la raíz

Estoy usando webpack y el HtmlWebpackPlugin para insertar js y css empaquetados 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 al visitar 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 empaquetados no se inyectan con una ruta absoluta. Cuando se carga el archivo html, buscará el archivo js dentro del directorio /items que no existe 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 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 al inicio de la fuente.

<script src="/main...js></script>

Respuesta #1

Intenta configurar el publicPath en tu configuración de webpack:

output.publicPath = '/'

HtmlWebpackPlugin usa publicPath para anteponer las URLs de los elementos inyectados.

Otra opción es establecer el href base en el <head> de tu plantilla HTML, para especificar la URL base de todas las URLs relativas en tu documento.

<base href="http://localhost:3000/">

Respuesta #2

De hecho, tuve que poner :

output.publicPath: './';

para que funcione en una ruta que no sea ROOT. Al mismo tiempo estaba inyectando :

   baseUrl: './'

en

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

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

Artículos relacionados