Webpack 文件加载器排除选项未按预期工作答案

【问题标题】：Webpack file-loader exclude option not working as expectedWebpack 文件加载器排除选项未按预期工作
【发布时间】：2019-01-26 08:03:45
【问题描述】：

在我的 webpack 配置中，我希望文件加载器插件将所有引用的图像放在 ./dist/images/ 文件夹中（包括 SVG）。同时，我希望文件加载器插件也将所有引用的字体文件（用于 font-awesome）放在 ./dist/assets/webfonts/ 文件夹中（这也包括 SVG）。

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

但更糟糕的是，./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/" }

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

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

【问题讨论】：

标签： webpack webpack-file-loader

【解决方案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 添加一个新部分并将它们从字体和图像部分中删除。

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

【讨论】：