如何从特定文件夹导入所有图像？

Question

我有用于构建项目的webpack，我想将特定文件夹中的所有图像添加到我的项目文件夹中。图片路径可能是动态的。

我的理解是，如果我使用js作为入口点，则可能会添加仅在js中导入的图像。所以我需要在该js中添加动态导入？

这是我的项目结构：

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

我的webpack配置

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";