webpack에서 글꼴 및 아이콘을 사용하는 방법은 무엇입니까?

Question

내가 reactjs, semantic-ui-react 및 nucleo 아이콘을 사용하는 프로젝트의 webpack 구성을 작성해야했습니다. 그것은 글꼴과 아이콘을 제외하고 거의 모든 것을 만듭니다. 나는 매우를 구축하고 nucleo 아이콘 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', 내가 할 CSS를 번들 스타일 JS 번들을 얻을. 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]' 
        } 
       } 
      },