Webpack + mdboostrap Errror: cannot resolve images

This is my webpack.config.js:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: {
        app: ['./src/app.js', './src/app.scss'],
    },
    output: {
        filename: 'js/[name].js',
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ]
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    }
};

I understand that you are importing MDB files in the app.js and app.scss files? Remove these imports and try config below. Note that in this configuration the MDB files are in the path src/jq-pro. You will probably have to change them to your own (according to your project structure).

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  context: __dirname,
  mode: 'development',
  entry: {
    'bootstrapCSS': path.resolve(__dirname, './src/jq-pro/css/bootstrap.css'),
    'jquery': path.resolve(__dirname, './src/jq-pro/js/jquery.js'),
    'popper': path.resolve(__dirname, './src/jq-pro/js/popper.js'),
    'bootstrapJS': path.resolve(__dirname, './src/jq-pro/js/bootstrap.js'),
    'mdb': [path.resolve(__dirname, './src/jq-pro/scss/mdb-pro.scss'), path.resolve(__dirname, './src/jq-pro/js/mdb.js')],
    'main': [path.resolve(__dirname, './src/app.js'), path.resolve(__dirname, './src/app.scss')]
  },
  devtool: 'cheap-eval-source-map',
  devServer: {
    inline: true
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].min.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html', //relative to root of the application
        template: path.resolve(__dirname, './src/index.html')
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      },
      {
        test: /\.(ico|jpg|jpeg|png|gif|svg)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
            context: 'src'
          }
        }
      },
      {
        test: /\.(eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
          }
        }
      },
      {
        test: /\.s?css$/i,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  externals: {
    'jquery': 'jQuery',
    'popper.js': 'popper',
    'chart.js': 'chart',
    'datatables.net': 'datatables.net',
    'desandro-matches-selector': 'desandro-matches-selector',
    'ev-emitter': 'ev-emitter',
    'fizzy-ui-utils': 'fizzy-ui-utils',
    'get-size': 'get-size',
    'outlayer': 'outlayer',
    './item': 'item',
    'clipboard': 'clipboard',
    'PerfectScrollbar': 'PerfectScrollbar',
  }
};