青岛网站制作排名,网络营销公司哪家服务好,如何做拼车网站app,陕西中小企业网站建设推广处理图片资源
过去在 Webpack4 时#xff0c;我们处理图片资源通过 file-loader 和 url-loader 进行处理
现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了#xff0c;我们只需要简单配置即可处理图片资源
1. 配置
const path require(path);modul…处理图片资源
过去在 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: /.styl$/,use: [style-loader, css-loader, stylus-loader],},{test: /.(png|jpe?g|gif|webp)$/,type: asset,},],},plugins: [],mode: development,
};2. 添加图片资源
src/images/1.jpegsrc/images/2.pngsrc/images/3.gif
3. 使用图片资源
src/less/index.less
.box2 {width: 100px;height: 100px;background-image: url(../images/1.jpeg);background-size: cover;
}src/sass/index.sass
.box3width: 100pxheight: 100pxbackground-image: url(../images/2.png)background-size: coversrc/styl/index.styl
.box5width 100pxheight 100pxbackground-image url(../images/3.gif)background-size cover4. 运行指令
npx webpack打开 index.html 页面查看效果
5. 输出资源情况
此时如果查看 dist 目录的话会发现多了三张图片资源
因为 Webpack 会将所有打包好的资源输出到 dist 目录下
为什么样式资源没有呢
因为经过 style-loader 的处理样式资源打包到 main.js 里面去了所以没有额外输出出来
6. 对图片资源进行优化
将小于某个大小的图片转化成 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: /.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,
};优点减少请求数量base64编码对应的图片会直接在页面生成而不是进行请求后响应得到缺点体积变得更大
此时输出的图片文件就只有两张有一张图片以 data URI 形式内置到 js 中了 注意需要将上次打包生成的文件清空再重新打包才有效果
