Webpack 网页包文件加载程序排除选项未按预期工作

在我的网页包配置中，我希望文件加载器插件将所有引用的图像放到

/dist/images/

文件夹中（包括SVG）。同时，我希望文件加载器插件也能在

/dist/assets/webfonts/

文件夹（这也包括SVG）中删除所有引用的字体文件（对于font awesome）

我遇到的问题是，标准SVG图像正被复制到

/dist/assets/webfont/

和

/dist/images/

文件夹中，字体SVG从font-awome复制到

/dist/images/

和

/dist/assets/webfont/

文件夹中

但更糟糕的是，

/dist/images/

中的所有SVG都不包含SVG数据，它们包含以下内容：

module.exports = __webpack_public_path__ + "./assets/webfonts/logo-text.svg";

这是我当前文件加载器插件的模块配置：

{ test: /.*\.(gif|png|jpe?g|svg)$/, loader: "file-loader", options: { name: "./images/[name]_[hash:7].[ext]" }, exclude:  __dirname +  "/../src/assets/" },
{ test: /.*\.(ttf|eot|woff|woff2|svg)$/, loader: "file-loader", options: { name: "./assets/webfonts/[name].[ext]" }, exclude:  __dirname + "/../src/images/" }

您会注意到，对于每个文件加载器条目，我已经排除了它不应该从中加载文件的文件夹，但这似乎不起作用

有没有办法解决这个问题？

我也有同样的问题

1.区分SVG字体和图像 您可以使用文件加载器的选项区分字体和图像，如下所示：

{
    test: /.*\.(gif|png|jpe?g|svg)$/,
    loader: "file-loader",
    options: {
        name: "[name].[ext]",
        outputPath: (url, resourcePath, context) => {
            const relativePath = path.relative(context, resourcePath);

            // ignore SVG file if its relative path contains "fonts" (in your case "assets")
            if (/\/fonts\//.test(relativePath)) {
                return;
            }

            return `images/${url}`;
        },
    },
},
{
    test: /.*\.(ttf|eot|woff|woff2|svg)$/,
    loader: "file-loader",
    options: {
        name: "[name].[ext]",
        outputPath: (url, resourcePath, context) => {
            const relativePath = path.relative(context, resourcePath);

            // ignore SVG file if its relative path contains "images"
            if (/\/images\//.test(relativePath)) {
                return;
            }

            return `fonts/${url}`;
        },
    },
},

但是还有另一个问题：

2.损坏的SVG内容 似乎只有最后一部分的SVG在工作。如果我首先运行字体，然后运行图像，那么只有图像才能正确构建，反之亦然。解决方法是为所有SVG添加一个新部分，并将其从字体和图像部分删除

{
    test: /.*\.(gif|png|jpe?g)$/,
    loader: "file-loader",
    options: {
        name: "images/[name].[ext]",
    },
},
{
    test: /.*\.(ttf|eot|woff|woff2)$/,
    loader: "file-loader",
    options: {
        name: "fonts/[name].[ext]",
    },
},
{
    test: /\.svg$/,
    loader: "file-loader",
    options: {
        name: "[name].[ext]",
        outputPath: (url, resourcePath, context) => {
            const relativePath = path.relative(context, resourcePath);

            if (/\/images\//.test(relativePath)) {
                // return target for svg images
                return `images/${url}`;
            } else if (/\/fonts\//.test(relativePath)) {
                // return target for svg fonts
                return `fonts/${url}`;
            }

            return `other/${url}`;
        },
    },
},