Опция исключения файлового загрузчика в Webpack не работает должным образом - PullRequest
Новая
       9

Опция исключения файлового загрузчика в Webpack не работает должным образом

0 голосов
/ 26 января 2019

В моем конфиге webpack я хочу, чтобы плагин загрузчика файлов отбрасывал все ссылки на изображения в папке ./dist/images/ (включая SVG). В то же время я хотел бы, чтобы плагин загрузчика файлов также удалял все файлы шрифтов, на которые есть ссылки (для font-awesome), в папку ./dist/assets/webfonts/ (сюда также входят SVG).

У меня проблема в том, что стандартные изображения SVG копируются в папки ./dist/assets/webfonts/ AND ./dist/images/, а SVG шрифтов из font-awesome копируются в папки ./dist/images/ AND ./dist/assets/webfonts/.

Но что еще хуже, все SVG в ./dist/images/ не содержат данных 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 Ответ

0 голосов
/ 06 марта 2019

У меня была такая же проблема.

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