Как добавить изображение зависимости от пользовательского загрузчика в веб-пакете? - PullRequest
Новая
       61

Как добавить изображение зависимости от пользовательского загрузчика в веб-пакете?

0 голосов
/ 13 января 2020

Я пытаюсь создать загрузчик, который будет просто анализировать содержимое для этого синтаксиса: 

{{ 'assets/someimage.png'|theme }}

все совпадения должны быть добавлены как зависимость веб-пакета из каталога root веб-пакета без каких-либо изменений в содержимом финала (этот синтаксис необходим шаблону CMS)

Вот где я был: 

let path = require('path'),
    themeRegex = /\{\{[\s?]*["|'|`](.*[\.[png|jpe?g|gif|ico])["|'|`][\s?]*\|[\s?]*theme[\s?]*\}\}/g;

module.exports = function (content, map, meta) {
    while ((themeFilterRequest = themeRegex.exec(content)) !== null) {
        var srcPath = path.join(this.rootContext, 'src')
        this.resolve(srcPath, './'+themeFilterRequest[1], (err, result) => {
            if (err) throw err
            console.log(result)
        })
    }

    return 'module.exports = [\n' +
        JSON.stringify(content) +
        '\n].join();'
};

, но на данный момент файл не загружен, в нужное место. На самом деле он создается в моей папке dist, но содержит только текст "assets / someimage.png" в файле расширения png ...

Как загрузить файл в двоичном формате?

Спасибо!

1 Ответ

1 голос
/ 13 января 2020

Когда вам требуется файл, отличный от js, веб-пакет применяет специальный загрузчик для каждого типа файла (проверьте конфигурацию вашего веб-пакета).

Из того, что вы описали, file-loader активировано для импорт изображений.

Вы можете использовать синтаксис встроенных загрузчиков веб-пакетов и указать точный загрузчик, который будет отвечать вашим требованиям. !!file-loader!path/to/file.png (в начале !! указывает веб-пакету запускать только указанные загрузчики). 

const fs = require('fs');
const path = require('path');

module.exports = function (content, map, meta) {
    // parse your content to get a list of paths to files
    filePaths.forEach(fileToLoad => {
       const file = fs.readFileSync(fileToLoad);
       const fileName = path.basename(fileToLoad);
       this.emitFile(fileName, file)
    });

    return content;
};
...