Webpack 加载 uri 类型 "url:./myfile.ttf"

Question

我有很多项目使用 parcel2，我最近开始为所有这些项目设置主题，我展示了使用 styleguidist 的作品，不幸的是使用了 webpack。

添加字体时，我曾专门使用 styleguidist 工作过一段时间（我真傻），效果很好，但在转移到 parcel2 时，我遇到了问题。 parcel的解决方法很简单，但是webpack和parcel的代码不兼容

这是我曾经拥有的以及与 webpack 一起使用的东西：

import quicksand from "../fonts/Quicksand-VariableFont_wght.ttf";

这是使用配置如下的文件加载器：

                {
                    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "file-loader",
                    options: {
                        esModule: false,
                        name: "[name].[ext]",
                    },
                },

为了使这个与 parcel2 一起工作，我必须把它变成：

import quicksand from "url:../fonts/Quicksand-VariableFont_wght.ttf";

注意开头添加的“url:”。这对 parcel 非常有效，但现在 webpack 很烦人。

据我所知，我有 2 个选择：

调整 webpack 以接受“url:”和link它以某种方式加载到文件加载器
调整包裹，使其 links 带有“url:”的 ttf 文件自动

我尝试了很多，准备、转换、别名，但无法让它在 parcel 和 webpack 中工作。

我主要专注于调整 webpack 方面的事情，因为有相当多的 parcel 项目，只有一个 webpack 项目，但如果有一个简单的 parcel 解决方案，我将完成更新所有项目的工作： )

如有任何帮助，我们将不胜感激！

Answer 1

如果有人知道如何使用 webpack 执行此操作，我仍然很感兴趣。与此同时，我找到了一个使用 .parcelrc

的解决方案

{
    "extends": "@parcel/config-default",
    "transformers": {
        "*.ttf": [
            "@parcel/transformer-raw",
        ],
    },
}

这将使用添加“url:”时使用的 transformer-raw 自动加载 ttf 文件：“

Webpack 加载 uri 类型 "url:./myfile.ttf"

Webpack to load uri type "url:./myfile.ttf"

fonts

parcel

webpack