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中如何使用图标字体
原文地址：http://www.cnblogs.com/shengnan-2017/p/8093030.html