title: How to work with fonts and icons in webpack?
body: <p>I needed to create webpack config for project where I use reactjs,semantic-ui-react and nucleo icons. It build almost everything except fonts and icons. I don't quite understand how to build them and nucleo icons dont display in project after build.My config:</p>
  
  <pre><code>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&amp;comments=true&amp;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;
  </code></pre>
  
  <p>So as a result I get js bundles in map 'js', I get css bundle style.min.css in css map. There also webpack creates images map, and puts jpg,png,svg. But font files(eot,ttf etc) he puts in js map with long names. How should I refactor my config in order to solve this problem?</p>