前端开发中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, // [email protected]
						disable: true,       // [email protected] 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

webpack4.x 教程

webpack 准备工作(1) webpack 手写最基本的配置(2) webpack 打包样式(3) webpack 让打包更便捷(4) webpack 打包图片(5) webpack iconfont打包(6) webpack devServer本地开发(7) webpack 处理ES6语法(8) webpack SourceMap配置(9) webpack Tree Shaking(10) webpack js代码分割(11) webpack 懒加载(12) webpack 打包分析,Preloading,Prefetching(13) webpack 模块化区分开发和生产(14) webpack 样式文件的代码分割(15) webpack 浏览器缓存(16) webpack shimming(17) webpack 环境变量(18) webpack Esline(19)