Webpack/Bootstrapで使用されるフォント形式を制限するにはどうすればよいですか？

Question

React 16、Bootstrap 3、Webpack 2、およびTypescript 2.3を使用します。デフォルトのブートストラップによって

はGlyphicons-Halflingsフォントファミリ用WOFF、WOFF2、EOT、TTFとSVGフォント形式を含んでいます。

私だけWOFFフォント形式をサポートするために満足している - あるいは少なくとも、私はIE8をサポートしていないので、私は間違いなくEOTに対処する必要はありません、とSVGとTTFがうるさく大きいです。私のjavascriptの成果にフォントを埋め込む

はこのWebPACKの構成を介して行われます。

module: { 
    rules: [ 
    {test: /\.(tsx|ts)$/, loader: "awesome-typescript-loader"}, 
    {test: /\.css$/, use: ['style-loader', 'css-loader']}, 
    {test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
     loader: 'url-loader?limit=10240', 
     options: { name: '[path][name].[ext]'}, 
    }, 
    {test: /\.js$/, enforce: "pre", loader: "source-map-loader"}, 
    ] 
}, 

私は実際にそのURLローダの設定がどのように機能するかについてはよく分かりません。もともと、フォントファイルを処理するために、コンテンツハッシュを使って名前を変更することなく処理しようとしていました。しかし、代わりにWebpackをJavaScriptファイルにインライン展開して、私はそれをもっと好きだと決めました。特に、他のフォントフォーマットを取り除いてサイズを小さくすることができればと思います。

は、最初は、私はちょうど同じように、URLローダの設定からフォントフォーマットを省略できると思っていた：

{test: /\.(png|woff)$/, 
     loader: 'url-loader?limit=10240', 
     options: { name: '[path][name].[ext]'}, 
    }, 

しかし、それはエラーのこれらの種類で失敗します。

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.eot 
Module parse failed: ....\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regular.eot Unexpected character '�' (1:0) 
You may need an appropriate loader to handle this file type. 
(Source code omitted for this binary file) 
@ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 6:4445-4497 6:4520-4572 
@ ./~/bootstrap/dist/css/bootstrap.css 
@ ./src/main/ts/AppReactRoot.tsx 

だから私はおそらく私のapp.cssファイルのブートストラップのフォント面を無効にすることができ、単一のフォント形式を指定するだけかもしれないと思った：

@font-face { 
    font-family: "Glyphicons Halflings"; 
    src: url("~bootstrap/dist/css/bootstrap.css") format('woff'); 
    font-weight: normal; 
} 

しかし、それは違いがないようです。 app.cssファイル、それが違いを行う場合、次のようになります。だから、

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

import "bootstrap/dist/css/bootstrap.css"; 
import './app.css'; 

import {UserApp} from "app/UserApp"; 

ReactDOM.render(
    <UserApp/>, 
    document.getElementById("root") 
); 

、質問です：私はWOFFフォントフォーマットを使用しているように、どのように私は、ブートストラップのデフォルトを上書きすることができますか？

Answer 1

ここで私が思いついたのです。

サポートしたいだけの形式でカスタムフォントを追加し、代わりにそれを使用して、ブートストラップ言う：

@font-face { 
    font-family: "Glyphicons Custom"; 
    src: url('~bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'); 
    font-weight: normal; 
} 

.glyphicon { 
    font-family: 'Glyphicons Custom'; 
} 

その後emitFiles=falseを追加することによって、あなたはWebPACKのコンフィグからしたくないフォントフォーマットを除外あなたが望まないフォーマットのローダールール。今のコード module.exports = __webpack_public_path__ + "fa2772327f55d8198301fdb8bcfc8158.woff"; ないのはなぜそれがその発光だと確信しが含まれているあなたのJavaScriptで第2小font-woffデータのURLが存在することを

module: { 
    rules: [ 
    {test: /\.(tsx|ts)$/, loader: "awesome-typescript-loader"}, 
    {test: /\.css$/, use: ['style-loader', 'css-loader']}, 
    // small PNGs (< limit bytes) will be inlined into the js 
    // larger will be dumped into assets/appVersion 
    { test: /\.(png)$/, 
     loader: 'url-loader', 
     options: { 
     limit: 10000, 
     name: '[name].[ext]', 
     publicPath: publicAssetPath, 
     }, 
    }, 
    /* This embeds WOFF format fonts (including haflings) regardless of 
    size. Embedding to get rid of "Flash of Invisible Text" issue with 
    glyphicons. 
    */ 
    { test: /\.woff$/, loader: 'url-loader'}, 
    // filter out glyphicons font formats we don't care about 
    { test: /bootstrap.dist.fonts.glyphicons-halflings-regular\.(woff|eot|svg|ttf|woff2)$/, 
     loader: 'file-loader?emitFile=false' 
    }, 
    {test: /\.js$/, enforce: "pre", loader: "source-map-loader"}, 
    ] 
}, 

注： 私のWebPACKモジュールのルールは今のように見えます。

元の質問でurl-loaderコードの問題は、あなたがloader財産とoptionsプロパティの両方でURLパラメータを使用することはできませんでした。私のlimit設定は無視されており、url-loaderはすべてを埋め込むべきであるという意味に思っています。