Как настроить выходной каталог файла шрифта из font-awesome-webpack в webpack?

от февраля. 2016 это, кажется, общий вопрос с webpack, поэтому я надеюсь, что это поможет. Если вы добавите это в загрузчик:'&name=./path/[hash].[ext]', который указывает, где искать эти файлы. Например:

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=./[hash].[ext]'
}

это помещает правильный URL-адрес шрифтов в сгенерированный файл CSS.

Я рекомендую этот метод при работе с чем-либо, кроме css/scss. Надеюсь, это поможет.

в дополнение к приведенным выше ответам, I Я должен был указать путь в выходных данных, чтобы заставить его работать так, чтобы указать размещенное местоположение, а не записывать активы в корневой путь:

output: {
     filename: "./bundle.js",
     path: “./client”
},
module: {
       loaders[
          {
              test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/octet-stream&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
              loader: "file?&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=image/svg+xml&name=./webpack-assets/[name]/[hash].[ext]"
            }   
  ]  // loaders
} // module 

{
    test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader?limit=100000'
}

эта схема помогла мне

Это мой случай, потому что мой путь к скрипту, как показано ниже:

    script(src='/javascripts/app.js')

Итак, я должен добавить ' & name./ javascripts / [хэш].[доб] для всех файлов шрифтов, как:

{
  test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
  test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
  test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/octet-stream&name=./javascripts/[hash].[ext]"
}, {
  test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
  loader: "file?name=./javascripts/[hash].[ext]"
}, {
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=image/svg+xml&name=./javascripts/[hash].[ext]"
}

Я font-awesome-webpack работает на моем ПК, но он не будет работать на моем Mac. Я думаю, что мой компьютер все еще бросал 404s для.woff2, .woff, and .tiff, но значки отображаются правильно, поэтому я проигнорировал проблему.

мой Mac, однако, не будет отображать значки. Во время чтения этого Q&A я попробовал кучу вещей. Вот что привело к моему решению:

1. на http://localhost:8080/View/ страница, я получал 404s, которые выглядели как ссылка ниже:
2. я вошел http://localhost:8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 в браузер, и подтвердил 404.
3. я пытался пойти http://localhost:8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 (удаление дополнительного пути перед файлом шрифта), и смог получить доступ к файлу.
4. я изменил ответ Павла, чтобы удалить . это сделало запрос файла относительным.

например, Поль предложил:--8-->

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=./[hash].[ext]'
}

обратите внимание на &name параметр, который использует ./[hash].[ext]. Я уронил поводок!--3--> и теперь нет 404s (браузер правильно запрашивает файлы из корня сайта):

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=/[hash].[ext]'
}

Вывод: Если ваша точка входа не находится в вашем веб-корне, и вы можете получить доступ к файлам шрифтов в веб-корне, вам, вероятно, просто нужно использовать эту конфигурацию имени, чтобы исправить путь.

та же проблема.

исправлено с помощью приведенного ниже синтаксиса,

loader: "file?name=./fonts/[hash].[ext]"

шрифты-это имя каталога, замените его своим собственным именем каталога.

пример:

{ 
  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
  loader: "url?name=/build/[hash].[ext]&limit=8192&mimetype=application/font-woff"
}

Как Примечание, я наткнулся на аналогичную ошибку, используя font-awesome-loader. Где каталог не будет установлен правильно, независимо от каких-либо изменений выше.

чтобы исправить это, параметр publicPath может быть добавлен к выходу:

output: { path: config.outputPath, filename: '[name].js', publicPath: '/assets/' },

папка / assets / будет изменена на то место, где вы фактически храните свои шрифты.

надеюсь, это поможет.