KESHAOYE的后花园处理字体图标资源 / 处理其他资源
1、下载字体图标文件
- 打开阿里巴巴矢量图标库
- 选择想要的图标添加到购物车，统一下载到本地
2、添加字体图标资源
src/fonts/iconfont.ttf
src/fonts/iconfont.woff
src/fonts/iconfont.woff2
src/css/iconfont.css
- 注意字体文件路径需要修改
src/main.js
js
import { add } from "./math";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";
console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));- public/index.html
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack5</title>
</head>
<body>
<h1>Hello Webpack5</h1>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<!-- 使用字体图标 -->
<i class="iconfont icon-arrow-down"></i>
<i class="iconfont icon-ashbin"></i>
<i class="iconfont icon-browse"></i>
<script src="../dist/static/js/main.js"></script>
</body>
</html>3、配置
js
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '/static/js/index.js',
clear: true
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader','css-loader']
},{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},{
test: /\.s[ac]ss$/,
use: ['style-loader','css-loader','sass-loader']
},{
test: /\.styl$/,
use: ['style-loader','css-loader','stylus-loader']
},
{
test: /\.(png|jpe?g|svg|webp|gif)$/,
type: 'asset',
parse: {
dataUrlCondition: {
maxSize: 10 * 1024
}
},
generator: {
filename: '/static/images/[hash:10][ext][query]'
}
},
{
test: /\.(ttf|woff2?|mp3|mp4|avi)$/, // 处理字体或其他资源
type: 'asset/resource',
generator: {
filename: '/static/media/[hash:10][ext][query]'
}
}
]
},
plugins: [],
mode: 'development'
}type:'asset'和type: 'asset/resource'的区别
- type: "asset/resource" 相当于
file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理 - type: "asset" 相当于
url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
4、运行指令
npx webpack