1

fontello で作成したカスタム アイコン フォントを使用しています。これを webpack で使用しようとすると、次のエラーが発生します。

ERROR in ./src/assets/fonts/fontello/fontello.ttf?86736756
Module parse failed: 
/Users/idamediafoundry/Documents/Work/Projects/ida-ida-default-
frontend-setup/ida-ida-default-frontend-setup-
static/src/assets/fonts/fontello/fontello.ttf?86736756 Unexpected 
character '' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:0)

そして、これは woff(2)、ttf、svg... すべてに対して行われます。SOF で見つかったいくつかのソリューションを使用しましたが、どれも機能していないようです。

これは私の webpack.config.js です:

module: {
        loaders: [
            { test: /\.js$/, loader: 'babel', exclude: /node_modules/},
            { test: /\.css$/, loader: "style!css!" },
        { test: /\.scss$/, loader: "style!css!sass!" },


        { test: /\.(woff|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'},


    ]
}

誰でもこれについて何かアイデアがありますか？

ありがとう！

よろしく

マリオ

4

2 に答える 2

3

protip: もはや存在しないフォント形式を使用しないでください。したがって、eotフォントもありませんsvg。また、WOFF は文字どおり ttf/otf のバイトごとのラッパーであるため、既に WOFF がある場合は ttf/otf を使用しないでください。これにより、複雑さという 1 つの問題が解決されます。

さて、その単一のフォント形式では、これをバンドルしないでください。静的アセットをJavaScriptバンドルにバンドルしないでください。適切なキャッシュ、304ロード防止などを使用して、ブラウザにロードさせてください。それらをバンドルすると、無駄になります変更されていないデータのバンドルを誰かがロードするたびに、大量の帯域幅が発生します。一部のコードを変更しましたが、静的アセットは同じままですか? 良いニュースです。あなたのバンドルは今、完全に再ダウンロードされます。これは、ホスティング コストのために、ユーザーの時間、帯域幅、そして潜在的には非常に実質的なドルを無駄にします。

静的アセットをバンドルから除外し、フォントを通常の CSS @font-face ルールにします。それは問題なく、問題なくロードされ、キャッシュされ、その後のロードははるかに高速になり、フォントファイルを再転送するためにサーバーにアクセスする必要がなくなります.

于 2016-07-26T01:10:45.043 に答える