estaba tratando de hacer una configuración minimalista de webpack 5 con vue. Pero me quedé atascado en el punto en el que necesito copiar imágenes de mi fuente para distribuirlas e inyectarlas con una ruta correcta a la imagen. Utilicé la nueva característica del paquete web - Módulos de activos. En primer lugar, mi estructura de directorio fuente:

 +--src +--assets +--fonts +--img +--js +--scss +-- main.scss +--components +--views

La configuración de mi paquete web

quiero hacer que la carpeta dist sea agradable y limpia con carpetas css js img separadas. En cuanto a ahora, genera resultados como yo quiero, pero el problema está en la ruta que se inyectó en el archivo .css. Mi main.scss obtuvo background-image: url('../img/test.png'); pero en la salida main.css tengo algo como esto:

 body { background-color: lightcoral; cursor: pointer; background-image: url(img/61c5d4399ef9dc90af90.png); background-size: cover; }

entonces url(img/61c5d4399ef9dc90af90.png); debe estar una carpeta arriba: url(../img/61c5d4399ef9dc90af90.png);

quiero usar esta genial función de paquete web, pero ahora estoy atascado