javascript - 如何在 webpack 中使用字体和图标？

Question

我需要为使用reactjs、semantic-ui-react 和 nucleo 图标的项目创建 webpack 配置。它构建了除字体和图标之外的几乎所有内容。我不太明白如何构建它们，构建后项目中不会显示 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;

因此，我在 map “js”中获得了 js 包，在 css map 中获得了 css 包 style.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]'
                    }
                }
            },