web-dev-qa-db-ja.com

webpackのfont-awesome-webpackからフォントファイル出力ディレクトリを設定するにはどうすればよいですか？

Font-awesome-webpackをインストールしました。 require("font-awesome-webpack");を使用してインポートします

私のwebpack設定には、私のモジュールローダーの配列に次のものが含まれています：

    { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

問題は、開発者コンソールでこのエラーが発生していることです：

localhost/:1 GET http://localhost/mysite/app/db812d8a70a4e88e888744c1c9a27e89.woff2 
localhost/:1 GET http://localhost/mysite/app/a35720c2fed2c7f043bc7e4ffb45e073.woff 
localhost/:1 GET http://localhost/mysite/app/a3de2170e4e9df77161ea5d3f31b2668.ttf 404 (Not Found)

問題は、これらのファイルがルート（mysiteディレクトリ内）に作成されることです。これらのwoffとttfがmysite/appディレクトリ内に出力されるように構成するにはどうすればよいですか？

javascriptfont-awesomewebpack
29
Rolando

最近、webpack v1で素晴らしいフォントを使用したかったので、npmモジュールをインストールしました_font-awesome_ではなく_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');

通常、テンプレートでfont-awesomeを使用できます。

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

この要点は私を助けました： https://Gist.github.com/Turbo87/e8e941e68308d3b40ef6

39
Vincent Taing

2016年2月現在、これは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]'
}

これにより、生成されたCSSファイル内のフォントへの正しいURLが配置されます。

Css/scss以外のものを扱う場合は、この方法をお勧めします。お役に立てれば。

10
Paul

上記の回答に加えて、出力でパスを指定して、ホストされた場所を指定し、アセットをルートパスに書き込まないように動作させる必要がありました。

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

このスキーマは私を助けました

2
tonghae

私のスクリプトパスは以下のようなものであるため、これは私の場合です。

    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]"
}
1
jadeydi

ちょうどメモとして、font-awesome-loaderを使用して同様の障害に遭遇しました。上記の変更に関係なく、ディレクトリが正しく設定されない場合。

これを修正するには、オプションpublicPathを出力に追加できます。

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

フォルダ/ assets /は、実際にフォントを保存する場所に変更されます。

これがお役に立てば幸いです。

1
Shaun Ripley

PCでfont-awesome-webpackを使用していましたが、Macでは動作しませんでした。私のPCは.woff2、.woff、および.tiffに対してまだ404を投げていたと思いますが、アイコンは適切に表示されたため、問題を無視しました。

しかし、私のMacはアイコンを表示しません。このQ＆Aを読みながら、いろいろなことを試しました。私のソリューションにつながるものは次のとおりです。

  1. http：// localhost：8080/View / ページで、以下のリンクのような404が表示されました。
  2. http：// localhost：8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 をブラウザに入力し、404を確認しました。
  3. http：// localhost：8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 （フォントファイルの前に余分なパスを削除する）にアクセスして、ファイルにアクセスできました。
  4. ポールの回答を修正して、ファイルリクエストを相対的にする.を削除しました。

たとえば、ポールは次のように提案しました。

{
    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]パラメーターに注意してください。主要な.を削除しましたが、404はありません（ブラウザーはサイトのルートからファイルを正しく要求します）：

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

結論：エントリポイントがWebルートになく、Webルートのフォントファイルにアクセスできる場合は、おそらくこの名前構成を使用してパスを修正する必要があります。

0
Michael Lewis

同じ問題に直面しました。

以下の構文を使用して修正し、

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"
}
0
john sam