url-loaderを使用したWebpackインラインフォント

Question

私はbase64でエンコードされたデータURIとしてインライン展開しようとしていますが、WebpackのURLローダーには不運です。これは、私のイメージとsvgファイルのためにURLローダーがやっているようだから変です。私のセットアップは以下の通りです：

ディレクトリ構造

root/ 
|-src/ 
|--assets/ 
| 
|----fonts/ 
|  icon-fonts/ 
|  fontawesome.woff2 
| 
|----styles/ 
|  fonts.css 
| 
|--components/ 
| main.component.js 
|... 

webpack.config.js

module: { 
    loaders: [ 
    { 
     test: /\.(jpg|png|svg|woff2)$/, 
     exclude: /node_modules/, 
     loader: 'url?limit=100000&name=[name]-[sha512:hash:base64:7].[ext]' 
    }, 
    ] 
} 

fonts.css

@font-face { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    src: url('../fonts/icon-fonts/fontawesome.woff2') format('woff2'); 
} 

main.component.js

import fonts from '../assets/styles/fonts.css' 
import React from 'react' 

export class App extends React.Component { 
    ... 
} 

出力

Answer 1

のurl-ローダーは、フォントをインライン化することができますが、私の推測ではない場合はわかりません。この目的でbase64-inline-loaderを使用できます。

注：それはとにかくファイルをエクスポートするため

示された例は私のために動作しませんでした。

{ 
    test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, 
    use: 'base64-inline-loader?limit=1000&name=[name].[ext]' 
} 

は、しかし、すぐに私は、ルールから名前を削除して、それは魔法のように動作

{ 
    test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, 
    use: 'base64-inline-loader' 
}