Webpack - Setting up relative path with mini-css-extract-plugin

Question

In order to output my css file using mini-css-extract-plugin to a directory I did something like the following:

  context: path.resolve(__dirname, "src"),
  entry: {
    "main": "./js/index.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg)/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "images/[hash].[ext]"
            }
          },
        ]
      },
      {
        test: /\.css$/,
        use: ['MiniCss.loader', 'css-loader', 'postcss-loader']
      },
  plugins: [
    new MiniCss({
      filename: '[name].[hash].css',
    })
  ]
}

and in css I have something like: background: url(img/fold.svg) right 30% / 100% no-repeat;

Now the problem is that all images are referenced from css/dist instead of dist. I can solve the problem by setting a publicPath: '../' on MiniCss.loader, but then all images are referenced from .././images which works by virtue of relative path, but doesn't look "natural". Now my question is there a cleaner way to achieve this?