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

Question

我的图片在 src/images 目录的不同子文件夹中。当我运行使用 webpack 创建构建时，所有图像都被复制到一个 img 文件夹，同名图像只替换一个 another.This 是我的图像 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
            }
         }
     ]
 }

能否请您建议如何配置 webpack 以使用与 src/images 中相同的文件夹结构来分隔图像。我是 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：如何处理子文件夹中的图片

Webpack4: how to deal with images in subfolders

webpack

webpack-dev-server

webpack-4