Webpackとフォントフェイスでフォントをロード

Question

@ font-faceを使用してCSSファイルにフォントをロードしようとしていますが、フォントはロードされません。これは私のディレクトリ構造です。

Directory structure

次にwebpack.config.jsに私がフォントを取得するためのローダーを持っています。私は私のindex.jsに私のCSSファイルを呼んでいる、最後に

@font-face { 
    font-family: 'Darkenstone'; 
    src: url('./Darkenstone.woff') format('woff'); 
} 

body { 
    background-color: green; 
    font-size: 24px; 
    font-family: 'Darkenstone'; 
} 

：私のCSSファイル内

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    "./index.js" 
    ], 
    output: { 
    path: __dirname+"/build", 
    filename: "main.js" 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ }, 
      { test: /\.jsx?$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ }, 
      { test: /\.svg$/, loader: "raw" }, 
      { test: /\.css$/, loader: "style-loader!css-loader" }, 
      { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=src/css/[name].[ext]'} 

     ] 
    } 
}; 

私はこれを持って

import './src/css/master.css'; 

すべてはなく、デフォントの作品ロードしないでください。ありがとう。

Answer 1

多くのものを試した後、次のローダーが作業を行いました。ファイルローダーの代わりに、私はURLローダーを使用しました。あなたはURLローダーがインストールされている必要があります。

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

Answer 2

は

{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=[name].[ext]'}

とあなたのoutputキーにpublicPath: 'build/'を追加するには、あなたのローダーを変更してみてください。