Javascript 使用Webpack将src文件夹结构维护到dist文件夹中？

我正在研究Webpack，我面临着这个问题。 当我运行构建任务“npm运行构建”时，webpack会创建dist文件夹。问题是dist文件夹不尊重src文件夹，Webpack将所有文件放入根文件夹（dist文件夹）。所以我在样式文件和所有图像附近有*.html页面。我想在dist中的html文件，在img中的图像（img-insidedist）等等

这是我的webpack.config.js文件：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      },
    },
    {
      test: /\.html$/,
      use: [{
        loader: 'html-loader',
        options: {
          minimize: true,
        },
      }],
    },
    {
      test: /\.(css|scss)$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            sourceMap: true,
            url: false,
            minimize: true,
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: true,
          },
        },
        {
          loader: 'sass-loader',
        },
      ],
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: [{
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      }],
    },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    new HtmlWebPackPlugin({
      template: './src/work.html',
      filename: 'work.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
    }),
    new CleanWebpackPlugin(['dist']),
  ],
};

我在网上找到了一些东西，但所有的解决方案都不起作用。 也许我做错了什么？请帮帮我

  ...
  module: {
    rules: [
     ...
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'img/[name].[ext]',
        },
      }],
    },
    ],
  },
  plugins: [
    ...
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash].css',
    }),
  ],
};

您只需将路径添加到名称