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

Ответ 1

Недавно я хотел использовать шрифт awesome с webpack v1, я установил модуль npm font-awesome not font-awesome-webpack

Перед загрузкой необходимо установить несколько загрузчиков:

npm i css-loader file-loader style-loader url-loader

и добавьте их в свой webpack.config.js:

module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style!css?sourceMap'
    }, {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/octet-stream"
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file"
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=image/svg+xml"
    }]
  }

Теперь, если вы включили в свой entry.js:

require('font-awesome/css/font-awesome.css');

Обычно вы можете использовать шрифт в своем шаблоне:

<i class="fa fa-times"></i>

Это помогло мне: https://gist.github.com/Turbo87/e8e941e68308d3b40ef6

Ответ 2

По состоянию на февраль 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. Надеюсь это поможет.

Ответ 3

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

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 

Ответ 4

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

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

Ответ 5

Это мой случай, поскольку мой путь script выглядит следующим образом:

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

Итак, мне нужно добавить '& name./javascripts/[hash]. [ext]' ко всем файлам шрифтов, например:

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

Ответ 6

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

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

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

Например, Павел предложил:

{
    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]. Я потерял ведущий . и теперь нет 404s (браузер правильно запрашивает файлы из корня сайта):

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

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

Ответ 7

Такая же проблема.

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

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

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

Пример:

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

Ответ 8

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

Чтобы исправить это, можно добавить параметр publicPath для вывода:

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

Папка/активы/будет изменена на то место, где вы действительно сохраняете свои шрифты.

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