Как импортировать все изображения из определенной папки?

Question

У меня есть веб-пакет для проекта сборки, и я хочу добавить все изображения из определенной папки в папку моего проекта.Путь к изображениям может быть динамическим.

Насколько я понимаю, если я использую js для точки входа, я могу добавлять изображения только для импорта в js.Так что мне нужно добавить динамический импорт в этом JS?

Здесь структура моего проекта:

project
  --dist  -output folder
  --files -folder with files
    --userFolder
      --appFolder
        --logoFolder
        --screenshotsFolder
  --src
    --View -entry folder
      --main.js
      --index.hbs

Моя конфигурация веб-пакета

module.exports = (urlPath: string) => {
    return {
        mode: 'production',
        entry: path.join(__dirname, 'src/View/main.js'),
        output: {
            path: path.join(__dirname, `dist/${urlPath}`),
            publicPath: './',
            filename: 'js/bundle.js',
        },
        module: {
            rules: [
                {
                    test: /\.hbs$/,
                    loader: 'handlebars-loader',
                },
                {
                    test: /\.css$/i,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        'css-loader',
                    ],
                },
                {
                    test: /\.(png|jpe?g|gif)$/,
                    use: [
                        {
                            context: path.resolve(__dirname, `files/${urlPath}/appLogo`),
                            loader: 'file-loader',
                        },
                    ],
                },
                {
                    test: /\.(eot|ttf|woff|woff2|svg|png|gif|jpe?g)$/,
                    loader: require.resolve('file-loader'),
                    options: {
                        name: '[name].[ext]?[hash]',
                        outputPath: 'assets/',
                    },
                },
            ],
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'css/style.css',
                allChunks: false,
            }),
            new OptimizeCssAssetsPlugin(),
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
               inject: true,
               hash: true,
               minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true,
               },
            templateParameters: formData,
            template: 'src/View/index.hbs',
          })
        ],
    };
};

Answer 1

Я не думаю, что это возможно, но, как я понял, хороший способ реализовать эту идею - загрузить все изображения через пакет import-glob npm, например:

import modules from "./foo/**/*.png";