How import all images from specific folder?

Question

I have webpack for build project, and I wanna add all images from specific folder to my project folder. Path to images may be dynamic.

How I understand, if I use js for entry point, I may add images only import in js. So I need add dynamic import in that js?

Here my project structure:

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

My webpack config

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

I don't think this is possible, but as I realized that the good way to do that idea is to load all images via the import-glob npm package like this:

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