Почему Webpack при сборке добавляет префикс?

Question

[Максим Белоусов]

Привет!

Выполняю production-сборку, Webpack 5.
Проблема со шрифтами, есть файлик assets/fonts.css, в нём есть строчки типа:

@font-face {
...
...
src: url(./fonts/someMagicFont.woff);
}

Затем fonts.css просто импортируется в index.tsx.

В output.publicPath записана строка: "/my/static/"

Ожидаемое поведение: в dist при сборке будет src у шрифтов заменяться на /my/static/[someHashedFont]
По факту src такой: file:///my/static/[someHashedFont]

Откуда появляется file:// и как можно поправить?

Comments

[Антон Горецкий]

хотелось бы увидеть всю секцию output из конфига Webpack

[Максим Белоусов]

Антон Горецкий,
output: {
chunkFilename: "[name].[contenthash].js",
path: path.join(___dirname, 'dist'),
publicPath: "/my/static/",
filename: "[name].[contenthash].js",
}

[Антон Горецкий]

Максим Белоусов, странно, по идее должно работать правильно. А к остальным ресурсам правильные пути получаются (img, svg) ? Возможно еще конфиг тайпскрипта на это как-то влияет...

[Максим Белоусов]

Антон Горецкий, да, картинки правильно в сборку загружаются... Со шрифтами беда вот.

[Антон Горецкий]

Максим Белоусов, вот тут разве не в кавычках должно быть:
src: url(./fonts/someMagicFont.woff);
вот так:
src: url('./fonts/someMagicFont.woff');

Answer 1

[Сергей delphinpro]

Вы открыли готовый css файл в редакторе и увидели в нём такие пути? Слабо верится.

Вероятно, вы открываете html файл просто двойным кликом?
В этом режиме шрифты, в отличие от картинок загружаться не будут.
Разместите файл на сервере (можно локальном) и открывайте его по http протоколу.