浅谈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 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
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 class中public,private,protected的区别以及实例分析
2013/06/18 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
ant design实现圈选功能
2019/12/17 Javascript
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Python中自定义函数的教程
2015/04/27 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python Socket使用实例
2017/12/18 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
为什么使用接口?
2014/08/13 面试题
什么是Assembly(程序集)
2014/09/14 面试题
用Python写一个for循环的例子
2016/07/19 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
入党积极分子思想汇报
2014/01/02 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
记者岗位职责
2014/01/06 职场文书
七年级地理教学反思
2014/01/26 职场文书
实验教师岗位职责
2014/02/13 职场文书
护理专科自荐书范文
2014/02/18 职场文书
员工年终自我评价
2014/09/14 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
爱心捐款活动总结
2015/05/09 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书