Webpack Font Awesome fonts getting wrong path

When I run npm run production it builds my JS and CSS (from SASS) and puts it in my drupal themes directory. The paths for the fonts are incorrect in my fontawesome.css.

The paths should look like ../fonts/vendor/@fortawesome/fontawesome-pro-webwebfa-brands-400.woff?5dd043615247f4082a329ccccaacca7b

or

/themes/<theme-name>/fonts/vendor/@fortawesome/fontawesome-pro-webwebfa-brands-400.woff?5dd043615247f4082a329ccccaacca7b

but they are being generated like /fonts/vendor/@fortawesome/fontawesome-pro-webwebfa-brands-400.woff?5dd043615247f4082a329ccccaacca7b

I have tried to add in a webpack.config.js file to get this working however I have not had much luck with this and I am really unsure what I'm doing. I never really did get this working correctly but I have included my code below.

const path = require('path');

const config = {
  src: './web/themes/<theme-name>/src/',
  dist: './web/themes/<theme-name>/'
};

module.exports = {
  entry: {
    main: config.src + 'js/app.js' ,
    sass: config.src + 'sass/app.scss'
  },
  output: {
    path: path.resolve(__dirname, config.dist)
  },
  module: {
    rules: [
      {
        test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: config.dist + 'fonts/',
            publicPath: '/themes/<theme-name>/fonts/'
          }
        }]
      }
    ]
  }
};

Any help with this would be greatly appreciated.