码迷,mamicode.com
首页 > Web开发 > 详细

webpack中如何使用图标字体

时间:2017-12-23 14:29:12      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:try   exp   public   export   color   col   .com   安装   图片   

 

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/

webpack中如何使用图标字体

标签:try   exp   public   export   color   col   .com   安装   图片   

原文地址:http://www.cnblogs.com/shengnan-2017/p/8093030.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!