webpack file loader relative path

Question

I have a webpack config file and a sample test for images like this:

   module: {
       rules : [
           test : /\.(jp?g|png|gif)$/,
           'file-loader?name=[name].[ext]&outputPath=images/'
       ]
   }

and I have a simple file structure like this:

/ src
    / img (1.jpg,2.jpg....)
    / css (a.css,b.css....)
    a bunch of html files

now when i refrence an image in my css file I write something like url('../img/1.jpg) because i need to go up one level and into the img folder, and when i include an image in my html I need to use something like this: <img data-id="1" src="<%= require('./img/1.jpg') %>" />.

---

when i run webpack everything works fine but the path is not configured right in the final css file! I get something like this:

  background: url(src/img/5.jpg); 

but it should be

 background: url(../src/img/5.jpg);

because the generated css file will be in a css folder

In other words the final css file goes into a subfolder so the image refrences inside it all should get a '../' but they dont

I hope i'm clear enough