webpackのフォントとアイコンの操作方法は？

Question

私はreactjs、semantic-ui-reactとnucleoのアイコンを使うプロジェクト用のwebpack configを作成する必要がありました。それはフォントとアイコンを除いてほぼすべてを構築します。私はかなりそれらを構築する方法を理解していないとヌクレオアイコンがbuild.Myの設定後にプロジェクトの表示をいけない：

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

const autoprefixer   = require('autoprefixer'); 
const ExtractTextPlugin  = require('extract-text-webpack-plugin'); 
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 
const ASSETS_PATH    = './assets'; 
const BUILD_DIR    = path.resolve(__dirname, 'build'); 

var webpack_config = { 

    context: path.resolve(__dirname, ASSETS_PATH), 

    entry: { 
     main   : [ 
          "react", 
          "react-dom", 
          "react-props", 
          "redux", 
          "react-redux", 
          "redux-thunk" 
         ], 
     module : "./js/module/index.jsx", 
    }, 

    output: { 
     filename: '[name].min.js', 
     path: BUILD_DIR + '/js' 
    }, 

    resolve: { 
     extensions: [' ','.js', '.jsx', 'css'] 
    }, 

    devtool: 'inline-source-map', 

    module : { 
     loaders : [ 
      { 
       test : /\.jsx?/, 
       loader : 'babel-loader?compact=true&comments=true&minified=true', 
       query: { 
        presets:[ 
         'es2015', 
         'react', 
         'stage-1' 
        ] 
       }, 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.(woff|woff2|eot|ttf|svg)(\?.*)?$/, 
       loader: 'file-loader?name=../css/fonts/[name].[ext]', 
       options: { 
        limit: 10000 
       } 
      }, 
      { 
       test: /\.(png|jpe?g|gif)(\?.*)?$/, 
       loader: 'file-loader?name=../css/images/[name].[ext]' 
      }, 
      { 
       test: /\.json$/, 
       loader: "json-loader" 
      }, 
      { 
       test: /\.css$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: "style-loader", 
        use: "css-loader" 
       }) 
      } 
     ] 
    }, 


    plugins: [ 
     new webpack.DefinePlugin({ 
      "process.env": { 
       NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production') 
      } 
     }), 
     new ExtractTextPlugin({ 
      filename: "../css/style.min.css", 
      disable: false, 
      allChunks: true 
     }), 
     new OptimizeCssAssetsPlugin({ 
      assetNameRegExp: /\.min\.css$/g, 
      cssProcessor: require('cssnano'), 
      cssProcessorOptions: { discardComments: { removeAll: true } }, 
      canPrint: true 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      names: ["main"] 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      minimize : true, 
      sourceMap : false, 
      beautify : false, 
      comments : false, 
      compress: { 
       warnings: false 
      } 
     }) 
    ] 
}; 

module.exports = webpack_config; 

だから私はマップ「JS」​​にJSバンドルを取得し、結果として、私は、CSSバンドルのスタイルを取得します。 cssマップのmin.css。またwebpackはイメージマップを作成し、jpg、png、svgを配置します。しかし、フォントファイル（eot、ttfなど）は、長い名前のjsマップに配置されます。この問題を解決するために私の設定をどのようにリファクタリングするべきですか？

Answer 1

は、ローダー構造でこの問題を解決し （多分誰かのために便利になります）：

{ 
       test: /\.(eot|svg|ttf|woff|woff2?)$/, 
       use: { 
        loader: 'file-loader' 
        , options: { 
         name: '../css/fonts/[name]-[hash:8].[ext]' 
        } 
       } 
      },