Webpack-使用mini-css-extract-plugin设置相对路径

Question

为了使用mini-css-extract-plugin将css文件输出到目录，我做了如下操作：

  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',
    })
  ]
}

在CSS中我有类似的东西： background: url(img/fold.svg) right 30% / 100% no-repeat;

现在的问题是，所有图像都是从css/dist而不是dist引用的。我可以通过在publicPath: '../'上设置MiniCss.loader来解决此问题，但是随后所有的图像都从.././images引用，这是通过相对路径实现的，但看起来并不“自然”。现在我的问题是有没有更清洁的方法来实现这一目标？