在 webpack 5 中保留子目录

Question

我有一个问题，但我没有找到任何东西（对于 WebPack 5）
我在我的 images 文件夹中创建了一个名为 svg 的文件夹，但是当 webpack 将它编译到 dist 文件夹中时，所有图像都被压平到那个图像文件夹中。
有什么东西可以保留子目录吗？（在 webpack 5 中）

{
    test: /\.(png|jpe?g|gif|webp)$/i,
    type: "asset/resource",
    generator: {
        filename: "images/[name][ext]",
    },
}

谢谢

Answer 1

我找到了解决方案，
filename 属性可以是一个函数，通过这个属性我们可以得到完整的路径，稍作改动就可以保留子目录。

{
    test: /\.(png|jpe?g|gif|webp)$/i,
    type: "asset/resource",
    generator: {
        filename: (name) => {
            /**
             * @description Remove first & last item from ${path} array.
             * @example
             *      Orginal Path: 'src/images/avatar/image.jpg'
             *      Changed To: 'images/avatar'
             */
            const path = name.filename.split("/").slice(1, -1).join("/");
            return `${path}/[name][ext]`;
        },
    },
}

感谢@felixmosh

在 webpack 5 中保留子目录

Preserve subdirectories in webpack 5

webpack

subdirectory

webpack-5