案例准备
file-loader
文件的名称规则
设置文件名称
设置文件的存放路径
url-loader
url-loader的limit
目录结构
wk.config.js
const path = require('path');
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
// 必须是一个绝对路径
path: path.resolve(__dirname, "./build")
},
module: {
rules: [
{
// 规则使用正则表达式
test: /.css$/, // 匹配资源
use: [
// { loader: "css-loader" },
// 注意: 编写顺序(从下往上, 从右往做, 从后往前)
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
"postcss-loader"
],
// loader: "css-loader"
},
{
test: /.less$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 2
}
},
"postcss-loader",
"less-loader"
]
},
{
test: /.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
// 打包到img目录下，保留文件名、6位哈希、扩展名，连接符除了句点，还可以用-等
// 效果等同于outputpath，但是这种写法更常用
name: "img/[name].[hash:6].[ext]",
limit: 100 * 1024 // 100kb以下的图片
}
}
]
}
]
}
}
asset module type的介绍
Asset module type的使用
url-loader的limit效果
加载字体文件
字体的打包
目录结构
wk.config.js
const path = require('path');
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
// 必须是一个绝对路径
path: path.resolve(__dirname, "./build"),
// assetModuleFilename: "img/[name].[hash:6][ext]"
},
module: {
rules: [
{
// 规则使用正则表达式
test: /.css$/, // 匹配资源
use: [
// { loader: "css-loader" },
// 注意: 编写顺序(从下往上, 从右往做, 从后往前)
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
"postcss-loader"
],
// loader: "css-loader"
},
{
test: /.less$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 2
}
},
"postcss-loader",
"less-loader"
]
},
{
test: /.(png|jpe?g|gif|svg)$/,
// type: "asset/resource", file-loader的效果
// type: "asset/inline", url-loader的效果
type: "asset",
generator: {
filename: "img/[name].[hash:6][ext]"
},
// 是parser，不是parse
parser: {
dataUrlCondition: {
// 是maxSize，不再是limit
maxSize: 100 * 1024
}
}
},
{
test: /.ttf|eot|woff2?$/i,
type: "asset/resource",
generator: {
filename: "font/[name].[hash:6][ext]"
}
}
]
}
}
index.html
- 注意，index.html中要使用字体图标，html代码要写在打包后的资源文件后面
<!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>Document</title>
</head>
<body>
<script src="./build/bundle.js"></script>
<!-- 注意，index.html中要使用字体图标，html代码要写在打包后的资源文件后面 -->
<div class="iconfont icon-caps-lock"></div>
<div class="iconfont icon-ashbin"></div>
<div class="iconfont icon-caps-lock"></div>
</body>
</html>
