前言:*处理图片资源说明 说明: 创建less文件,开发样式并使用背景图片 代码如下: 在webpack配置文件webpack.config.js中配置打包图片的loader 配置代码如下: 示例说明: 注意事项: 因此我们并不需要所有的图片都打包为base64图片, 所以我们需要对url-loader进行配置. 低于设置大小的图片打包为base64图片, 超过设置大小的图片不打包为base64图片 通过options来配置图片打包的loader 示例: 上面的打包后发现,图片的名字都非常长, 我们也可以通过options配置图片文件名的长度 注意: 上面的配置只能处理CSS或者less等样式文件中引入的图片 默认不能处理html通过img标签引入的图片 故而我们需要对html文件进行打包配置 通过html-loader处理html中引入的图片 下载loader 配置loader 注意: html-loader专门处理html文件中img标签引入的图片1. 处理在样式文件中引入的图片
1.1 在less中引入图片
#box1{
width: 100px;
height: 100px;
background-image:url("../img/vue.jpg");
background-repeat: no-repeat;
background-size: 100% ,100%;
}
#box2{
width: 200px;
height: 200px;
background-image:url("../img/react.jpg");
background-repeat: no-repeat;
background-size: 100% ,100%;
}
#box3{
width: 300px;
height: 400px;
background-image:url("../img/angular.png");
background-repeat: no-repeat;
background-size: 100% ,100%;
}
1.2 配置webpack
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path")
module.exports = {
entry: "./src/main.js",
output: {
filename : "bundle.js",
path: resolve(__dirname, 'dist')
},
module: {
rules:[
{
test: /\.less$/,
// 多个loader, 使用use配置
use:["style-loader","css-loader","less-loader"]
},
{
test: /\.(jpg|png|gif)$/,
// 使用一个loader处理, 用loader配置
// 注意url-loader依赖file-loader
// 因此两个loader都需要安装
loader: "url-loader",
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode:"development"
}
2. 图片打包配置
2.1 示例结果分析
2.2 配置url-loader
module.exports = {
// ...
module:{
rules:[
{
test: /\.(jpg|png|gif)$/,
// 使用一个loader处理, 用loader配置
loader: "url-loader",
options:{
// 配置图片打包loader
// 图片大小低于8kb的会打包为base64格式,
// 超过的处理为文件格式
limit: 8 * 1024
}
}
]
},
// ...
}
2.3 配置打包后文件名的长度
module.exports = {
// ...
module:{
rules:[
{
test: /\.(jpg|png|gif)$/,
// 使用一个loader处理, 用loader配置
loader: "url-loader",
options:{
// 配置图片打包loader
// 图片大小低于8kb的会打包为base64格式,
// 超过的处理为文件格式
limit: 8 * 1024,
// 给图片进行重命名
// [hash:8] 是取图片打包的hash名的前8位
// [ext] 取图片原来的文件扩展名
name: '[hash:8].[ext]'
}
}
]
},
// ...
}
3. 处理html文件引入的图片
3.1 处理html文件引入图片的说明
3.2 配置html文件的loader
$ yarn add html-loader -D
module.exports = {
// ...
module:{
rules:[
// ...
{
test: /\.html$/,
// 使用html-loader处理html文件中引入的图片
// html-loader是专门处理img图片,引入img,从而被url-loader处理
loader:"html-loader"
}
]
},
// ...
}