数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

浅谈webpack4 图片处理汇总

来源:脚本之家  责任编辑:小易  

本次课程的代码目录(如下图所示):

>>> 本节课源码

>>> 所有课程源码

本节课会讲述 webpack4 中的图片常用的基础操作:

  1. 图片处理 和 Base64编码
  2. 图片压缩
  3. 合成雪碧图

1. 准备工作

如项目代码目录展示的那样,除了常见的 app.js 作为入口文件,我们将用到的 3 张图片放在 /src/assets/img/ 目录下,并在样式文件 base.css 中引用这些图片。

剩下的内容交给 webpack 打包处理即可。样式文件和入口 js 文件的代码分别如下所示:

/* base.css */
*, body {
 margin: 0;
 padding: 0;
}
.box {
 height: 400px;
 width: 400px;
 border: 5px solid #000;
 color: #000;
}
.box div {
 width: 100px;
 height: 100px;
 float: left;
}
.box .ani1 {
 background: url("./../assets/imgs/1.jpg") no-repeat;
}
.box .ani2 {
 background: url("./../assets/imgs/2.jpg") no-repeat;
}
.box .ani3 {
 background: url("./../assets/imgs/3.png") no-repeat;
}
// app.js
import "style-loader/lib/addStyles";
import "css-loader/lib/css-base";

import "./css/base.css";

在处理图片和进行 base64 编码的时候,需要使用 url-loader

在压缩图片的时候,要使用 img-loader 插件,并且针对不同的图片类型启用不同的子插件。

postcss-loaderpostcss-sprites 则用来合成雪碧图,减少网络请求。

因此,在 npm 安装完相关插件后, package.json 的内容如下所示:

{
 "devDependencies": {
  "css-loader": "^1.0.0",
  "extract-text-webpack-plugin": "^4.0.0-beta.0",
  "file-loader": "^1.1.11",
  "imagemin": "^5.3.1",
  "imagemin-pngquant": "^5.1.0",
  "img-loader": "^3.0.0",
  "postcss-loader": "^2.1.6",
  "postcss-sprites": "^4.2.1",
  "style-loader": "^0.21.0",
  "url-loader": "^1.0.1",
  "webpack": "^4.16.1"
 }
}

同时,我们编写如下 index.html (假设已经打包好了项目文件,现在直接引入):

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="./dist/app.min.css" rel="external nofollow" >
</head>
<body>
 <div id="app">
  <div class="box">
   <div class="ani1"></div>
   <div class="ani2"></div>
   <div class="ani3"></div>
  </div>
 </div>
 <script src="./dist/app.bundle.js"></script>
</body>
</html>

2. 图片处理 和 Base64 编码

2.1 webpack 配置

为了方便样式提取,还是利用 extract-text-webpack-plugin 来提取样式文件。

同时,在 module.rules 选项中进行配置,以实现让 loader 识别图片后缀名,并且进行指定的处理操作。

代码如下:

// webpack.config.js

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let extractTextPlugin = new ExtractTextPlugin({
 filename: "[name].min.css",
 allChunks: false
});

module.exports = {
 entry: {
  app: "./src/app.js"
 },
 output: {
  publicPath: __dirname + "/dist/",
  path: path.resolve(__dirname, "dist"),
  filename: "[name].bundle.js",
  chunkFilename: "[name].chunk.js"
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     fallback: {
      loader: "style-loader"
     },
     use: [
      {
       loader: "css-loader"
      }
     ]
    })
   },
   {
    test: /\.(png|jpg|jpeg|gif)$/,
    use: [
     {
      loader: "url-loader",
      options: {
       name: "[name]-[hash:5].min.[ext]",
       limit: 20000, // size <= 20KB
       publicPath: "static/",
       outputPath: "static/"
      }
     }
    ]
   }
  ]
 },
 plugins: [extractTextPlugin]
};

通过配置 url-loader 的 limit 选项,可以根据图片大小来决定是否进行 base64 编码。这次配置的是:小于 20kb 的图片进行 base64 编码。

2.2 打包结果

之前提到过,在项目中引入了 3 张图片,其中 3.png 是小于 20kb 的图片。在命令行中运行 webpack 进行打包,size 小于 20kb 的图片被编码,只打包了 2 个 size 大于 20kb 的图片文件:

打开浏览器的控制台,我们的图片已经被成功编码:

3. 图片压缩

3.1 压缩配置

图片压缩需要使用 img-loader ,除此之外,针对不同的图片类型,还要引用不同的插件。比如,我们项目中使用的是 png 图片,因此,需要引入 imagemin-pngquant ,并且指定压缩率。

我们只需要在上面的配置文件中将下方代码:

// ...
{
 test: /\.(png|jpg|jpeg|gif)$/,
 use: [
  {
   loader: "url-loader",
   options: {
    name: "[name]-[hash:5].min.[ext]",
    limit: 20000, // size <= 20KB
    publicPath: "static/",
    outputPath: "static/"
   }
  }
 ]
}
// ...

替换为下方代码即可,因为执行顺序问题,我们将 url-loader 的 limit 设置成 1kb,来防止压缩后的 png 图片被 base64 编码:

// ...
{
 test: /\.(png|jpg|jpeg|gif)$/,
 use: [
  {
   loader: "url-loader",
   options: {
    name: "[name]-[hash:5].min.[ext]",
    limit: 1000, // size <= 1KB
    publicPath: "static/",
    outputPath: "static/"
   }
  },
  // img-loader for zip img
  {
   loader: "img-loader",
   options: {
    plugins: [
     require("imagemin-pngquant")({
      quality: "80" // the quality of zip
     })
    ]
   }
  }
 ]
}
// ...

3.2 打包结果

运行 webpack 打包,查看打包结果:

是的,如你所见,10.5kb 大小的迅雷图标,被压缩到了 1.8kb。图片信息可以去 github 上查看,在文章开头有提及 github 地址。

3.3 遗留问题

并没有解决 jpg 格式图片压缩。根据 img-loader官方文档 ,安装了 imagemin-mozjpeg 插件。

但是这个插件的最新版本是 7.0.0 ,然而配置后,webpack 启动会用报错。

查看了 github 上的 issue,我将版本回退到 6.0.0 。可以安装,也可以配置运行,正常打包。但是打包后的 jpg 图片大小并没有变化,也就是说,并没有被压缩!!!

希望有大佬可以指点一下小生,万分感谢

 4. 合成雪碧图

4.1 webpack 配置

在之前的基础上,配置还是很简单的,loader 的引入和环境变量都在注释里面了:

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let extractTextPlugin = new ExtractTextPlugin({
 filename: "[name].min.css",
 allChunks: false
});

/*********** sprites config ***************/
let spritesConfig = {
 spritePath: "./dist/static"
};
/******************************************/

module.exports = {
 entry: {
  app: "./src/app.js"
 },
 output: {
  publicPath: __dirname + "/dist/",
  path: path.resolve(__dirname, "dist"),
  filename: "[name].bundle.js",
  chunkFilename: "[name].chunk.js"
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     fallback: {
      loader: "style-loader"
     },
     use: [
      {
       loader: "css-loader"
      },
      /*********** loader for sprites ***************/
      {
       loader: "postcss-loader",
       options: {
        ident: "postcss",
        plugins: [require("postcss-sprites")(spritesConfig)]
       }
      }
      /*********************************************/
     ]
    })
   },
   {
    test: /\.(png|jpg|jpeg|gif)$/,
    use: [
     {
      loader: "url-loader",
      options: {
       name: "[name]-[hash:5].min.[ext]",
       limit: 10000, // size <= 20KB
       publicPath: "static/",
       outputPath: "static/"
      }
     },
     {
      loader: "img-loader",
      options: {
       plugins: [
        require("imagemin-pngquant")({
         quality: "80"
        })
       ]
      }
     }
    ]
   }
  ]
 },
 plugins: [extractTextPlugin]
};

4.2 效果展示

按照我们的配置,打包好的雪碧图被放入了 /dist/static/ 目录下,如下图所示:

4.3 雪碧图的实际应用

雪碧图是为了减少网络请求,所以被处理雪碧图的图片多为各式各样的 logo 或者大小相等的小图片。而对于大图片,还是不推荐使用雪碧图。

除此之外,雪碧图要配合 css 代码进行定制化使用。要通过 css 代码在雪碧图上精准定位需要的图片(可以理解成从雪碧图上裁取需要的图片),更多可以百度或者 google。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:


  • 本文相关:
  • webpack css加载和图片加载的方法示例
  • webpack配置打包后图片路径出错的解决
  • 详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
  • 浅谈用webpack路径压缩图片上传尺寸获取的问题
  • 浅谈webpack打包过程中因为图片的路径导致的问题
  • webpack+vue中使用别名路径引用静态图片地址
  • 详解vue-cil和webpack中本地静态图片的路径问题解决方案
  • webpack踩坑之路图片的路径与打包
  • webpack打包后直接访问页面图片路径错误的解决方法
  • javascript每日必学之运算符
  • cascadeview级联组件实现思路详解(分离思想和单链表)
  • javascript数据结构之双链表插入排序实例详解
  • js 页面内容搜索,类似于 ctrl+f功能的实现代码
  • js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
  • javascript cookies 设置、读取、删除实例代码
  • 一些javascript的ie和firefox(火狐)兼容性的问题总结及常用例子
  • js实现数组转换成json
  • 根据输入邮箱号跳转到相应登录地址的解决方法
  • 自己写的javascript计算时间差函数
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved