webpack处理图片资源
过去在Webpack4时，我们处理图片资源通过file-loader和url-loader进行处理。
现在Webpack5已经将两个Loader功能内置到Webpack里了，我们只需要简单配置即可处理图片资源。
1. 配置
//webpack.config.js
const path = require("path");
module.exports = {
// 入口【相对路径】
entry: './src/main.js',
// 输出
output: {
// 文件的输出路径【绝对路径】
// __dirname 当前文件的文件夹的绝对路径
path: path.resolve(__dirname, 'dist'),
// 文件的输出名称
filename: 'main.js'
},
// 加载器
module: {
rules: [
// loader 的配置
// css样式
{
test: /\.css$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
]
},
// less样式
{
test: /\.less$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
'less-loader',// 将less文件编译成css文件
]
},
// sass样式
{
test: /\.s[ac]ss$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
'sass-loader',// 将sass文件编译成css文件
]
},
// stylus样式
{
test: /\.styl$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
'stylus-loader',// 将Styl文件编译成css文件
]
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
}
]
},
// 插件
plugins: [
// plugin的配置
],
/*
模式：
开发模式：development
生产模式：production
*/
mode: "development"
}2. 添加图片资源
3. 使用图片资源
- src/less/index.less
.box2 { width: 100px; height: 100px; background-image: url("../images/clean-window.jpeg"); background-size: cover; } - src/sass/index.sass
.box3 width: 100px height: 100px background-image: url("../images/cleaning-service.png") background-size: cover - src/styl/index.styl
.box5 width 100px height 100px background-image url("../images/orders.gif") background-size cover
4. 运行指令
运行以下指令，然后打开index.html页面查看效果。
npx webpack5. 输出资源情况
此时如果查看 dist 目录的话，会发现多了三张图片资源，因为 Webpack 会将所有打包好的资源输出到 dist 目录下。
为什么样式资源没有呢？
因为经过 style-loader 的处理，样式资源打包到main.js里面区了，所以没有额外输出出来。
6. 对图片资源进行优化
将小于某个大小的图片转化为data URL形式（Base64格式）
- 优点：减少请求数量
- 缺点：体积变得更大
此时当图片大小不超过10kb的图片就会以 data URL形式内置到js中了。
注意：需要将上次打包生成的文件清空，再重新打包才有效果。
const path = require("path");
module.exports = {
// 入口【相对路径】
entry: './src/main.js',
// 输出
output: {
// 文件的输出路径【绝对路径】
// __dirname 当前文件的文件夹的绝对路径
path: path.resolve(__dirname, 'dist'),
// 文件的输出名称
filename: 'main.js'
},
// 加载器
module: {
rules: [
// loader 的配置
// css样式
{
test: /\.css$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
]
},
// less样式
{
test: /\.less$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
'less-loader',// 将less文件编译成css文件
]
},
// sass样式
{
test: /\.s[ac]ss$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
'sass-loader',// 将sass文件编译成css文件
]
},
// stylus样式
{
test: /\.styl$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
'stylus-loader',// 将Styl文件编译成css文件
]
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
// 小于10kb的图片会转成base64
// 优点：减少请求数量；缺点：体积会变大
maxSize: 10 * 1024
}
}
}
]
},
// 插件
plugins: [
// plugin的配置
],
/*
模式：
开发模式：development
生产模式：production
*/
mode: "development"
}