浅谈webpack4 图片处理汇总


Posted in Javascript onSeptember 12, 2018

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

浅谈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 的图片文件:

浅谈webpack4 图片处理汇总

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

浅谈webpack4 图片处理汇总

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 打包,查看打包结果:

浅谈webpack4 图片处理汇总

是的,如你所见,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/ 目录下,如下图所示:

浅谈webpack4 图片处理汇总

4.3 雪碧图的实际应用

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

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

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

Javascript 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
vue增删改查的简单操作
Jul 15 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue二级菜单导航点击选中事件的方法
Sep 12 #Javascript
vue this.reload 方法 配置
Sep 12 #Javascript
jquery 动态遍历select 赋值的实例
Sep 12 #jQuery
JS中判断字符串存在和非空的方法
Sep 12 #Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 #Javascript
微信小程序实现tab左右切换效果
Nov 15 #Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 #Javascript
You might like
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
php实现可运算的验证码
2015/11/10 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
几种tab切换详解
2017/02/03 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
Python contextlib模块使用示例
2015/02/18 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
百丽国际旗下购物网站:优购
2017/02/28 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
中职生自荐信
2013/10/13 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
文体活动总结范文
2014/05/05 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
身边的榜样活动方案
2014/08/20 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书