webpack中如何使用图标字体
2024-09-01 12:09:06
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/
最新文章
- NSData与其它类型的转换
- CSS中兼容的一面-----Hack
- 张小龙《微信背后的产品观》之PPT完整文字版
- Android安全之WebViewUXSS漏洞
- Matlab单一变量曲线拟合-cftool
- Codeforces 132E Bits of merry old England 【最小费用最大流】
- 【Uploadify】远程上传图片到【七牛云存储】
- Drozer安装
- gmt学习资源
- 【HDOJ】1455 Sticks
- Android项目svn代码管理问题
- 关于PS里图层样式的全局光
- dedecms学习笔记
- 【Win 10 应用开发】在代码中加载文本资源
- JAVA NIO工作原理及代码示例
- Hibernate查询部分字段并封装到指定类中
- laravel接值 get post
- ESLint 配置说明
- spring boot 使用war包部署
- 「Vue」父子组件之间的传值及调用方法