wap网站在线生成app,爱空间装修公司属于什么档次,宁波seo外包费用,欧美网站设计特点处理图片资源
过去在 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: cover
src/styl/index.styl
.box5width 100pxheight 100pxbackground-image url(../images/3.gif)background-size cover
4. 运行指令
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,
};
优点减少请求数量缺点体积变得更大
此时输出的图片文件就只有两张有一张图片以 data URI 形式内置到 js 中了
注意需要将上次打包生成的文件清空再重新打包才有效果
