Question

我的图像分隔在src / images目录的不同子文件夹中。当我运行使用webpack创建版本时，所有图像都被复制到一个img文件夹中，并且具有相同名称的图像会彼此替换。这是我对图像的webpack配置：

 {
     test: /\.(png|jpe?g)/i,
     use: [
        {
           loader: "url-loader",
           options: {
              name: "img/[name].[ext]",
              limit: 10000
            }
         },
         {
            loader: "img-loader",
            options: {
                name: "img/[path]/[name].[ext]",
                useRelativePath: true
            }
         }
     ]
 }

能否请您建议如何使用与src / images中相同的文件夹结构将webpack配置为分离图像。我是webpack的新手。谢谢

这是对我有用的最终答案：

{
                    test: /\.(png|jpe?g)/i,
                    use: [
                        {
                            loader: "url-loader",
                            options: {
                                name: "img/[path][name].[ext]",
                                context: "src/assets/images",
                                limit: 10000
                            }
                        },
                        {
                            loader: "img-loader",
                            options: {
                                name: "img/[path][name].[ext]",
                                context: "src/assets/images"
                            }
                        }
                    ]
                }

Answer 1

代码中的内容是要求Webpack通过以下方式处理图像文件：

loader: "url-loader",
options: {
    name: "img/[name].[ext]",
    limit: 10000
}

表示将所有文件以img/[name].[ext]的方式放置（将所有文件放置在单个目录“ img”中），在此您想使用"img/[path]/[name].[ext]"来维护路径结构原始文件。

因此，将您的代码块更改为：

{
test: /\.(png|jpe?g)/i,
use: [
    {
        loader: "url-loader",
        options: {
            name: "img/[path]/[name].[ext]",
            limit: 10000
        }
    },
    {
        loader: "img-loader",
        options: {
            name: "img/[path]/[name].[ext]",
            useRelativePath: true
        }
    }
  ]
}

如果目录结构的级别过多，则可以选择使用类似的方法：

options: {
    name: "img/[path]/[name].[ext]",
    context: "src" // or whatever common directories above actual images
}

Webpack4：如何处理子文件夹中的图像

1 个答案: