获取全套webpack 4.x教程，请访问瓦力博客
前端开发中iconfont字体图标现在用的也是非常多，下面小菜将配置iconfont。
- 阿里巴巴矢量图标{:target="_blank"}
1.文件结构
大家在阿里巴巴矢量图标库中创建一个自己的项目，然后在自己项目中添加几个图标，然后下载来,解压后放在iconfont目录下面。
myProject
|-dist
|-node_modules
|-src
|-assets
|-css
|-index.css
|-less
|-index.less
|-sass
|-index.scss
|-images
|-wali_logo.png
+ |-iconfont
+ |-demo.css
+ |-demo_index.html
+ |-iconfont.css
+ |-iconfont.eot
+ |-iconfont.js
+ |-iconfont.svg
+ |-iconfont.ttf
+ |-iconfont.woff
+ |-iconfont.woff2
|-index.html
|-index.js
|-package.json
|-webpack.config.js
|-postcss.config.js
iconfont下面有几个文件是没有用的，大家可以删掉，也可以不用管。
2.iconfont配置
src/index.js
import "./assets/iconfont/iconfont.css";
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<span class="iconfont wali-icon-dingbu"></span>
</body>
</html>
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html文件
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除
module.exports = {
mode:'development',
entry:'./src/index.js',
module:{
rules:[
{
test:/\.css$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:1
}
},
'postcss-loader'
]
},
{
test:/\.scss$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2
}
},
'sass-loader',
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2
}
},
'less-loader',
'postcss-loader'
]
},
{
test:/\.(png|svg|jpeg|jpg|gif)$/,
use:[
{
loader:'file-loader',
options:{
name:'[name].[ext]', //[path] 上下文环境路径
publicPath:'./assets/image/', //公共路径
outputPath:'assets/image/', //输出路径
}
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack@1.x
disable: true, // webpack@2.x and newer
},
},
]
},
{
test: /\.html$/,
use:[
{
loader:'html-loader',
options:{
arrts:['img:src','img:data-src'],
minimize:false //是否压缩html
}
}
]
},
+ {
+ test: /(iconfont.svg)|\.(woff|woff2|eot|ttf|otf)$/,
+ use:[
+ {
+ loader:'file-loader',
+ options:{
+ name:'[name].[ext]', //[path] 上下文环境路径
+ publicPath:'./assets/iconfont/', //公共路径
+ outputPath:'assets/iconfont/', //输出路径
+ }
+ }
+ ]
+ }
]
},
plugins: [
new HtmlWebpackPlugin({
title: '瓦力博客',
template: './src/index.html' //以src/index.html为编译模板
}),
new CleanWebpackPlugin()
],
output:{
path: path.resolve(__dirname,'dist')
}
}
运行webpack
yarn run dev
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)