Установлен путь назначения URL-адреса

Я использую плагин url-loader для webpack и настроен как:

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000"
}

Он выводит файлы > 50k в файловую систему, но я не могу найти, как установить путь назначения.

В этом случае я хочу, чтобы файлы сохранялись в ./fonts, а не в корне.

Ответы

Ответ 1

url-loader построен на файловом загрузчике, поэтому вы можете использовать его как файл-загрузчик, как показано ниже:

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000&name=fonts/[name].[ext]"
}

Ответ 2

вы можете написать это следующим образом

{
        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
          }
        }]
      }

Ответ 3

Чтобы добавить к ответу @wandergis, url-loader переименует изображение, если предел размера превышен, и используйте хэш для имени. При использовании [name].[ext], как было предложено, используется исходное имя файла, что мне не нужно. Мне понадобилось имя хэша, который создаст url-loader. Итак, вы можете добавить [hash].[ext], чтобы получить переименованный файл.

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000&name=fonts/[hash].[ext]"
}

Ответ 4

Вы также можете сделать это, что может быть чище

   {
     test: /\.(ttf|eot|woff|woff2|svg)$/,
     use: [
        {
          loader: 'url-loader',
          options: {
            name:'[hash].[ext]' 
            outputPath: 'fonts',
          },
        },
       ],
    }