Как загрузить изображения с помощью Webpack 4?

Question

Я пытаюсь загрузить изображения в свой проект веб-пакета. Но они не обнаруживаются, когда я запускаю свой dev-сервер, я получаю следующую ошибку: Failed to load resource: the server responded with a status of 404 (Not Found).

Я также хотел бы включить их в папку dist в папке с именем img, но я не могу понять, как, не нарушая все.

Я пробовал разные методы, найденные в Интернете, но ни один из них не работал ..

Структура моей папки:

- config (all my webpack config files)
- src
  |- fonts
  |- img
  |- javascript
  |- scss
  |- index.html

Вот мой webpack.base.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WebpackAssetsManifest = require('webpack-assets-manifest');

var DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
  // https://webpack.js.org/concepts/entry-points/#multi-page-application
  entry: {
    index: './src/javascript/index.js',
    home: './src/javascript/chunks/home.js',
    about: './src/javascript/chunks/about.js',
    projects: './src/javascript/chunks/projects.js'
  },

  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'index.[contenthash:8].js',
    chunkFilename: '[id]-[chunkhash].js',
    publicPath: '/'
  },

  devServer: {
    open: true
  },

  // https://webpack.js.org/concepts/loaders/
  module: {
    rules: [
      {
        test: [/.js$|.ts$/],
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/typescript', '@babel/preset-env']
          }
        }
      },
      {
        test: /\.svg$/,
        loader: 'svg-url-loader',
        options: {
          noquotes: true
        }
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        exclude: /fonts/,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, // webpack@1.x
              disable: true // webpack@2.x and newer
            }
          }
        ]
      },
      {
        test: [/.css$|.scss$/],
        include: [path.resolve(__dirname, '../src/scss/')],
        use: [
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader' },
          { loader: 'sass-loader' },
          { loader: 'postcss-loader' }
        ]
      },
      {
        test: /\.(woff|woff2|ttf|otf|eot)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  },

  resolve: {
    alias: {
      '@scss': path.resolve(__dirname, '../src/scss'),
      '@img': path.resolve(__dirname, '../src/img'),
      '@fonts': path.resolve(__dirname, '../src/fonts'),
      '@': path.resolve(__dirname, '../src')
    },
    modules: ['node_modules', path.resolve(__dirname, '../src')],
    extensions: ['.js', '.jsx', '.scss', '.gif', '.png', '.jpg', '.jpeg', '.svg']
  },

  // https://webpack.js.org/concepts/plugins/
  plugins: [
    new WebpackAssetsManifest({
      // Options go here
    }),
    new DashboardPlugin({
      // Options go here
    }),
    new MiniCssExtractPlugin({
      filename: 'app.[contenthash:8].css',
      chunkFilename: '[id].css'
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: true,
      chunks: ['index', 'home'],
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'index.html'
    }),
    new HtmlWebpackPlugin({
      template: './src/about.html',
      inject: true,
      chunks: ['index', 'about'],
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'about.html'
    }),
    new HtmlWebpackPlugin({
      template: './src/projects.html',
      inject: true,
      chunks: ['index', 'projects'],
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'projects.html'
    })
  ]
};

В моем html я называю изображения следующим образом: <img src="./img/myImage.jpg" >

В моих файлах scss я называю изображения следующим образом: url(../img/arrow__top-right__outline__yellow.svg); (я использую ../img/, потому что в качестве моегофайл находится в моей папке scss, я захожу на 1 папку, чтобы получить мою папку src/img/ .. верно?)