Question

在我的webpack配置中，我希望文件加载器插件将所有引用的图像拖放到./dist/images/文件夹（包括SVG）中。同时，我希望文件加载器插件还将所有引用的字体文件（对于真棒字体）都放在./dist/assets/webfonts/文件夹中（也包括SVG）。

我遇到的问题是将标准SVG图像复制到./dist/assets/webfonts/和./dist/images/文件夹中，而来自font-awesome的字体SVG被复制到./dist/images/ AND { {1}}个文件夹。

但更糟糕的是，./dist/assets/webfonts/中的所有SVG都不包含SVG数据，它们包含以下内容：

./dist/images/

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

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

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

关于如何解决此问题的任何想法？

Answer 1

我有同样的问题。

1。区分SVG字体和图像

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

{
    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添加一个新部分，并将其从fonts和images-部分中删除。

{
    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}`;
        },
    },
},

Webpack文件加载器排除选项无法按预期工作

1 个答案:

1。区分SVG字体和图像

2。 SVG内容损坏