160 lines
3.3 KiB
Markdown
160 lines
3.3 KiB
Markdown
# 处理图片资源
|
||
|
||
过去在 Webpack4 时，我们处理图片资源通过 `file-loader` 和 `url-loader` 进行处理
|
||
|
||
现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源
|
||
|
||
## 1. 配置
|
||
|
||
```js{29-32}
|
||
const path = require("path");
|
||
|
||
module.exports = {
|
||
entry: "./src/main.js",
|
||
output: {
|
||
path: path.resolve(__dirname, "dist"),
|
||
filename: "main.js",
|
||
},
|
||
module: {
|
||
rules: [
|
||
{
|
||
// 用来匹配 .css 结尾的文件
|
||
test: /\.css$/,
|
||
// use 数组里面 Loader 执行顺序是从右到左
|
||
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|gif|webp)$/,
|
||
type: "asset",
|
||
},
|
||
],
|
||
},
|
||
plugins: [],
|
||
mode: "development",
|
||
};
|
||
```
|
||
|
||
## 2. 添加图片资源
|
||
|
||
- src/images/1.jpeg
|
||
- src/images/2.png
|
||
- src/images/3.gif
|
||
|
||
## 3. 使用图片资源
|
||
|
||
- src/less/index.less
|
||
|
||
```css
|
||
.box2 {
|
||
width: 100px;
|
||
height: 100px;
|
||
background-image: url("../images/1.jpeg");
|
||
background-size: cover;
|
||
}
|
||
```
|
||
|
||
- src/sass/index.sass
|
||
|
||
```css
|
||
.box3
|
||
width: 100px
|
||
height: 100px
|
||
background-image: url("../images/2.png")
|
||
background-size: cover
|
||
```
|
||
|
||
- src/styl/index.styl
|
||
|
||
```css
|
||
.box5
|
||
width 100px
|
||
height 100px
|
||
background-image url("../images/3.gif")
|
||
background-size cover
|
||
```
|
||
|
||
## 4. 运行指令
|
||
|
||
```:no-line-numbers
|
||
npx webpack
|
||
```
|
||
|
||
打开 index.html 页面查看效果
|
||
|
||
## 5. 输出资源情况
|
||
|
||
此时如果查看 dist 目录的话，会发现多了三张图片资源
|
||
|
||
因为 Webpack 会将所有打包好的资源输出到 dist 目录下
|
||
|
||
- 为什么样式资源没有呢？
|
||
|
||
因为经过 `style-loader` 的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来
|
||
|
||
## 6. 对图片资源进行优化
|
||
|
||
将小于某个大小的图片转化成 data URI 形式（Base64 格式）
|
||
|
||
```js{32-36}
|
||
const path = require("path");
|
||
|
||
module.exports = {
|
||
entry: "./src/main.js",
|
||
output: {
|
||
path: path.resolve(__dirname, "dist"),
|
||
filename: "main.js",
|
||
},
|
||
module: {
|
||
rules: [
|
||
{
|
||
// 用来匹配 .css 结尾的文件
|
||
test: /\.css$/,
|
||
// use 数组里面 Loader 执行顺序是从右到左
|
||
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|gif|webp)$/,
|
||
type: "asset",
|
||
parser: {
|
||
dataUrlCondition: {
|
||
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
|
||
}
|
||
}
|
||
},
|
||
],
|
||
},
|
||
plugins: [],
|
||
mode: "development",
|
||
};
|
||
```
|
||
|
||
- 优点：减少请求数量
|
||
- 缺点：体积变得更大
|
||
|
||
此时输出的图片文件就只有两张，有一张图片以 data URI 形式内置到 js 中了
|
||
（注意：需要将上次打包生成的文件清空，再重新打包才有效果）
|