I have this config for images and fonts in my webpack config file:

{
  test: /\.(ttf|eot|svg|woff(2?)|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        publicPath: env.prod ? '/resources/dist/fonts' : '/pf/resources/dist/fonts',
        name: '[path][name].[ext]',
        context: 'src',
        esModule: false,
      },
    },
  ],
},

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use: [
    'file-loader',
    {
      loader: 'file-loader',
      options: {
        publicPath: env.prod ? '/resources/dist/images' : '/pf/resources/dist/images',
        name: '[path][name].[ext]',
        context: 'src/websites',
        esModule: false,
      },
    },
  ],
},

With this config when I build I get this:

resources/dist/website-1/images and resources/dist/website-2/fonts

The path in dist will be dynamic, that is why I need the public path to be dynamic.