为了账号安全,请及时绑定邮箱和手机立即绑定

webpack iconfont打包(6)

标签:
webpack

获取全套webpack 4.x教程,请访问瓦力博客

前端开发中iconfont字体图标现在用的也是非常多,下面小菜将配置iconfont。

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

ssl

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消