Wie arbeite ich mit Schriftarten und Symbolen im Webpack?

Question

Ich musste eine Webpack-Konfiguration für ein Projekt erstellen, wo ich reactjs, semantic-ui-react und nucleo icons verwende. Es baut fast alles außer Schriftarten und Icons. Ich verstehe nicht ganz, wie sie zu bauen und nucleo Symbole nicht Anzeige im Projekt nach build.My config:

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; 

So als Folge ich js Bündel in der Karte ‚js‘, ich CSS-Bundle Stil. min.css in CSS-Karte. Dort erstellt Webpack auch Bilderkarte und setzt jpg, png, svg. Aber Schriftdateien (eot, ttf etc) legt er in js map mit langen Namen an. Wie sollte ich meine Konfiguration umgestalten, um dieses Problem zu lösen?

Answer 1

dieses Problem gelöst mit einer solchen Struktur loader (wird vielleicht für jemanden nützlich sein):

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