i was trying to make a minimalistic webpack 5 config with vue. But i've got stuck at point where i need to copy images from my source to dist and inject them with a correct path to image. I used new webpack feature - Asset Modules. First of all my source dirictory structure:

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

My webpack config

i want to make dist folder nice and clean with separate css js img folders. As for now it generate output just like i want but, the problem is in path that got injected in .css file. My main.scss got background-image: url('../img/test.png'); but in output main.css ive got something like this:

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

so url(img/61c5d4399ef9dc90af90.png); must be one folder up :url(../img/61c5d4399ef9dc90af90.png);

i want to use this cool webpack feature but now im just stuck