Tengo sitios web, escritos principalmente en pug (preprocesador html). Utilizo output.publicPath igual a '/' para poder ejecutar el paquete web en modo de desarrollo y trabajar fácilmente, tratando la carpeta del proyecto como raíz, pero cada href, src y url es una ruta absoluta. Quiero cambiar cada ruta agregando algunos nodos (usemos '/ ruta / a /' por ejemplo) al principio, cuando construyo el proyecto. Por ejemplo, tengo una imagen

img(src="/img/image.jpg")

Y después de construir este proyecto, quiero recibir esto:

<img src="/path/to/img/image.jpg">

Y recibir lo mismo con hrefs y urls.

Hice una configuración de compilación de paquete web y configuré output.publicPath en '/ path / to /' pero cambió las rutas de los archivos css y js vinculados:

mode: "production",
  output: {
  publicPath: "/HTMLPractice/dist/"
}

Estaré encantado de recibir cualquier solución, idea o recomendación.

5
SpekalsG3 15 oct. 2019 a las 23:20

1 respuesta

La mejor respuesta

Puede configurar publicPath en file-loader, siempre que la expresión regular file-loader contenga los archivos de imagen.

En tus reglas de webpack.config.js:

     {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          publicPath: 'some/path',
        },
      },

Más información: https://webpack.js.org/loaders/file-loader/ #publicpath

1
Jay Kariesch 15 oct. 2019 a las 20:32