Webpack url-загрузчик задать путь назначения

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

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

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

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

15
urlloader webpack

3 ответов

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

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

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

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

вы можете написать это так

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