webpack中如何使用图标字体

Posted 2020-10-18 shengnan_2017

 

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/