如何使用Webpack 4加载图像？

Question

我正在尝试在我的webpack项目中加载图像。但是当我启动我的开发服务器时找不到它们，出现以下错误：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/文件夹..对吗？）