Exclude Folders from Webpack Bundle

Question

I have a react app that contains 2 different applications with different stylings and images.

I am trying to exclude the images for 1 application being bundled.

The folder structure is the following:

 - src
  -- app
  -- images
   --- images_app1
   --- images_app2
  -- app1.js
  -- app2.js
  -- app1.html
  -- app2.html
 - webpack.config.js

Webpack config:

const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const globImporter = require('node-sass-glob-importer');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// App directory
const appDirectory = fs.realpathSync(process.cwd());

// Gets absolute path of file within app directory
const resolveAppPath = relativePath => path.resolve(appDirectory, relativePath);

// Host
const host = process.env.HOST || 'localhost';
const devMode = process.env.NODE_ENV !== 'production';

// Required for babel-preset-react-app
process.env.NODE_ENV = 'development';

module.exports = {
  mode: 'development',
  entry: {
    app: resolveAppPath('src/app1.js'),
    polyfill: resolveAppPath('src/polyfills.js'),
    vendor: resolveAppPath('src/vendor.js'),
  },
  output: {
    path: resolveAppPath('dist'),
    filename: 'js/[name].js',
    publicPath: '/',
  },
  devServer: {
    clean: true,
    port: 8082,
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        include: resolveAppPath('src'),
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          'style-loader',
          'css-loader',
          {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: devMode,
                            sassOptions: {
                                importer: globImporter()
                            }
                        }
                    }
        ],
      },
      {
        test: /\.(jpe?g|png|svg|jpg|gif)$/,
        exclude: [resolveAppPath('src/images/app2')],
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
      {
        test: /\.(ico|xml)$/,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'fonts/[name].[ext]',
            },
          },
        ],
      }
    ],
  },

  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),
    new HtmlWebpackPlugin({
      template: resolveAppPath('src/app1.html'),
      filename: 'index.html',
      chunks: ['polyfill', 'vendor', 'app'],
      inject: true,
    }),
  ],
}

However, I get the following errors:

ERROR in ./src/images/app2/walkthrough/walkthrough-start-image.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./src/images/ sync .* ./app2/walkthrough/walkthrough-start-image.png
 @ ./src/app1.js 33:0-39

I tried to use webpack ignore plugin as well however I could not succeed exclude.