The context

I'm working on a React project where the styles and the images are being provided by an external theme, as the React app will be embeded into a portlet inside this webpage. As so, the images inside the React app are relative and point to a directory which I don't have access to during development.

<img src="/relative/external/theme/images/themeImg.png" />

As I don't have access to it, when I develop locally I am not able to see any of those images. However, for development purposes I do have those image files locally in my src/js/images/ local directory.

We are using Webpack 4.

The current config

Here I leave part of the actual configuration (I cannot publish everything):

 {
    name: 'main',
    mode: 'development',
    devtool: 'source-map',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
    },
    entry: {
      main: './src/main/js/main.js',
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          resolve: { extensions: ['.js', '.jsx'] },
          exclude: /node_modules/,
          loaders: ['babel-loader'],
        },
        {
          test: /\.svg$/,
          use: [
            {
              loader: 'svg-url-loader',
            },
          ],
        },
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        {
          test: /\.scss$/,
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: 'css-loader',
            },
            {
              loader: 'sass-loader',
            },
          ],
        },
      ],
    },
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      port: 9000,
      historyApiFallback: true,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods':
          'GET, POST, PUT, DELETE, PATCH, OPTIONS',
        'Access-Control-Allow-Headers':
          'X-Requested-With, content-type, Authorization',
      },
    }
  }

The question

Is there a way to which I can tell Webpack to make my src/js/images/ directory public, so it's accessible by the HTML src attributes, and redirect all relative/external/theme/images calls to that public images/ directory in development (without messing with publicPath so the whole bundle is still served from the same place)?

I cannot import images and use them in the src since I cannot import them from a directory I don't have access to, that's why the whole folder should be public and available to load the images from it.