目录
过去在 Webpack4 时,我们处理图片资源通过 `file-loader` 和 `url-loader` 进行处理。现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源。
1.如何配置
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: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
},
],
},
plugins: [],
mode: "development",
};
2.如何使用
src/less/index.less
src/sass/index.sass
...
//在以下文件位置中添加对应图片资源就行
src/images/1.jpeg
src/images/2.png
src/images/3.gif
然后其他静态资源、Js文件都正常编写完成后,运行如下指令即可查看效果:
npx webpack
3.资源打包输出结果
我们指令运行完成后查看 dist 目录的话,会发现多了三张图片资源,这是因为 Webpack 会将所有打包好的资源输出到 dist 目录下,其中样式资源打包到 main.js 里面去了,所以没有额外输出。
4.图片资源的优化
这里就是将小于某个大小的图片转化成 data URI 形式(Base64 格式),其配置如下:
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: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
}
},
],
},
plugins: [],
mode: "development",
};
这种处理图片资源的方式会有如下优缺点:
- 优点:减少请求数量
- 缺点:体积变得更大
小于设定图片大小的图片会以 data URI 形式内置到 js 中,这里注意:需要将上次打包生成的文件清空,再重新打包才有效果