如何使用webpack中的字体和图标？

Question

我需要为项目创建webpack配置，我使用reactjs，semantic-ui-react和nucleo图标。除了字体和图标之外，它几乎可以构建所我不太明白如何构建它们和核心图标不会在构建后显示在项目中。我的配置：

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 map中获得了css包style.min.css。还有webpack创建图像映射，并放置jpg，png，svg。但是他在js地图中放置了长名字的字体文件（eot，ttf等）。我应该如何重构我的配置才能解决这个问题？

Answer 1

用这样的加载器结构解决了这个问题（可能对某些人有用）：

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