webpack中如何使用图标字体

 

1.webpack安装相关依赖

$ npm install font-awesome-webpack less less-loader css-loader style-loader file-loader font-awesome

2.配置webpack.config.js

module.exports = {
    entry: './index.js',
    output: {
        path: path.join(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: 'css-loader',
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            },
            {
                test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,
                loader: 'url-loader?limit=1024'
            }
        ]
    }

3.入口文件引入

import 'font-awesome-webpack';

4.打包后生成的图标字体

<i data-v-71776bc3="" class="fa fa-home fa-2x"></i>

5.显示结果如下：

详情请参考：http://fontawesome.io/