如何在 webpack 中添加来自自定义加载器的图像依赖项？

Question

我正在尝试创建一个加载程序，它将只解析以下语法的内容：

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

每个匹配项都应作为 webpack 根目录中的 webpack 依赖项添加，而不会对最终内容进行任何更改（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 文件夹中创建的，但只包含 png 扩展文件中的文本 "assets/someimage.png"...

如何二进制加载文件？

谢谢！

Answer 1

当你需要 js 以外的文件时，webpack 会为每种文件类型应用一个特殊的加载器（检查你的 webpack 配置）。

根据您的描述，file-loader 已激活图像导入。

您可以使用 webpack 内联加载器语法，并指定应该处理您的需求的确切加载器。 !!file-loader!path/to/file.png（开头的!!告诉webpack只运行指定的loader）。

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;
};

如何在 webpack 中添加来自自定义加载器的图像依赖项？

How to add an image dependency from a custom loader in webpack?

webpack

webpack-loader

webpack-4