Я использую плагин url-loader для webpack и настроен как:
{
test: /\.(ttf|eot|woff|woff2|svg)$/,
loader: "url-loader?limit=50000"
}
Он выводит файлы > 50k в файловую систему, но я не могу найти, как установить путь назначения.
В этом случае я хочу, чтобы файлы сохранялись в ./fonts, а не в корне.
url-loader построен на файловом загрузчике, поэтому вы можете использовать его как файл-загрузчик, как показано ниже:
{
test: /\.(ttf|eot|woff|woff2|svg)$/,
loader: "url-loader?limit=50000&name=fonts/[name].[ext]"
}
вы можете написать это следующим образом
{
test: /\.(png|woff|eot|ttf|svg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1000, // if less than 10 kb, add base64 encoded image to css
name: "assets/[hash].[ext]" // if more than 10 kb move to this folder in build using file-loader
}
}]
}
Чтобы добавить к ответу @wandergis, url-loader переименует изображение, если предел размера превышен, и используйте хэш для имени. При использовании [name].[ext], как было предложено, используется исходное имя файла, что мне не нужно. Мне понадобилось имя хэша, который создаст url-loader. Итак, вы можете добавить [hash].[ext], чтобы получить переименованный файл.
{
test: /\.(ttf|eot|woff|woff2|svg)$/,
loader: "url-loader?limit=50000&name=fonts/[hash].[ext]"
}
Вы также можете сделать это, что может быть чище
{
test: /\.(ttf|eot|woff|woff2|svg)$/,
use: [
{
loader: 'url-loader',
options: {
name:'[hash].[ext]'
outputPath: 'fonts',
},
},
],
}