0
369
ViewsWebpack 5 importa imágenes y fuentes, reescribe url en prod
Necesito copiar los archivos de imagen y fuente a la carpeta adecuada en el directorio dist, el problema es que en el archivo css final obtengo la ruta de URL incorrecta. Traté de deshabilitar url css-loader luego los archivos no se copiaron en absoluto. Intenté agregar ~ a la URL. Necesito usar asset/resource para copiar y pegar la ruta correcta en la hoja de estilo. Varias otras soluciones obsoletas no funcionarán para mí.
Configuración de mi paquete web 5
Importo el archivo menos a main.js.
Mi estructura de carpetas
2 answers
Answer question0
Personalice publicPath para que apunte a la carpeta desde donde se sirven sus archivos estáticos.
0
Resolví mi problema agregando publicPath: "." , ¿por qué hay un punto entre comillas? Porque tengo la ruta ./ en la propia URL, así que agrego un punto y puedo salir del directorio.
Para las fuentes, creé un generador que crea una carpeta separada, las rutas funcionan con el mismo principio.
output: { path: path.resolve(__dirname, "dist"), publicPath: ".", assetModuleFilename: "./img/[name].[ext]", clean: true, }, { test: /\.(jpe?g|png|gif|svg)$/i, type: "asset/resource", }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: "asset/resource", generator: { filename: "./fonts/[name][ext]", }, },