浅谈webpack4 图片处理汇总

2024-12-03 12:02:39

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

>>> 本节课源码

>>> 所有课程源码

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

图片处理和 Base64编码
图片压缩
合成雪碧图

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-loader 和 postcss-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 如何处理图片(开发、打包、优化)

从 webpack book 的 Loading Assets 一章中延申出来. 改善前端项目体验中,很重要的点就是静态资源的优化.它是由于浏览器客户端在同一时间针对同一域名的请求有一定资源限制.如果资源过多.过大就会使得页面卡顿. 静态资源中,又以图片最为典型.那么我们在开发中该如何处理图片呢? webpack 是前端较为常用的手脚架工具,本文以它为例. 主要分为开发 . 打包 . 优化三个方面来介绍示例地址: webpack demo 开发 webpack 可以用使用url-loa
浅谈webpack4 图片处理汇总

本次课程的代码目录(如下图所示): >>> 本节课源码 >>> 所有课程源码本节课会讲述 webpack4 中的图片常用的基础操作: 图片处理和 Base64编码图片压缩合成雪碧图 1. 准备工作如项目代码目录展示的那样,除了常见的 app.js 作为入口文件,我们将用到的 3 张图片放在 /src/assets/img/ 目录下,并在样式文件 base.css 中引用这些图片. 剩下的内容交给 webpack 打包处理即可.样式文件和入口 js 文件的代码分
浅谈js图片前端预览之filereader和window.URL.createObjectURL

浅谈js图片前端预览之filereader和window.URL.createObjectURL //preview img : filereader方式 document.getElementById('imgFile').onchange = function(e){ 5 var ele = document.getElementById('imgFile').files[0]; var fr = new FileReader(); fr.onload = function(ele){ va
浅谈Webpack4 plugins 实现原理

目录前言认识实践出真知前言在 wabpack 中核心功能除了 loader 应该就是 plugins 插件了,它是在webpack执行过程中会广播一系列事件,plugin 会监听这些事件并通过 webpack Api 对输出文件做对应的处理, 如 hmlt-webpack-plugin 就是对模板魔剑 index.html 进行拷贝到 dist 目录的认识先来通过源码来认识一下 plugins 的基本结构 https://github.com/webpack/webpack/blo
浅谈webpack4.x 入门(一篇足矣)

前言: webpack4出了以后,一些插件变化很大,和之前的版本使用方式不一样,新手入坑,本篇将介绍如何从一开始配置webpack4的开发版本,对css,js进行编译打包合并生成md5,CSS中的图片处理,js自动注入html页,删除指定文件,提取公共文件,热更新等等. 安装 //全局安装 npm install -g webpack webpack-cli 创建文件夹初始化 //创建文件夹 mkdir webpack4demo //进入 cd webpack4demo //初始化 npm in
浅谈python图片处理Image和skimage的区别

做cnn的难免要做大量的图片处理.由于接手项目时间不长,且是新项目,前段时间写代码都很赶,现在稍微总结(恩,总结是个好习惯). 1,首先安装python-Image和python-skimage.python-matplotlib. 简单代码: import Image as img import os from matplotlib import pyplot as plot from skimage import io,transform import argparse def show_d
浅谈Webpack4 Tree Shaking 终极优化指南

几个月前,我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4.我们的主要目标之一是利用 tree-shaking 的优势,即 Webpack 去掉了实际上并没有使用的代码来减少包的大小.现在,tree-shaking 的好处将根据你的代码库而有所不同.由于我们的几个架构决策,我们从公司内部的其他库中提取了大量代码,而我们只使用了其中的一小部分. 我写这篇文章是因为恰当地优化 Webpack 并不简单.一开始我以为这是一种简单的魔法,但后来我花了一个月的时间在网上搜索我遇到
浅谈Volley加载不出图片的问题

问题分析:加载后台图片的时候,发现加载不出来,后来发现图片的url格式是: http://192.168.1.71/\carhome\shop\778c2bc3ec0a49e1969b24b3a8e62f31\detail\DSC04209.JPG 因为Volley请求,不识别url中有"\" 所以需要把"|"替换成"/" 以下是工具类 public class StringUtil { public static String formatUr
浅谈Android获取ImageView上的图片,和一个有可能遇到的问题

1.在获取图片前先调用setDrawingCacheEnabled(true)这个方法: 举例:mImageView.setDrawingCacheEnabled(true); 2.之后可以通过getDrawingCache()获取图片举例:Bitmap obmp = Bitmap.createBitmap(mImageView.getDrawingCache()); //获取到Bitmap的图片 3.获取完图片后记得调用setDrawingCacheEnabled(false) 举例:mI
浅谈图片上传利用request.getInputStream()获取文件流时遇到的问题

图片上传功能是我们web里面经常用到的,获得的方式也有很多种,这里我用的是request.getInputStream()获取文件流的方式.想要获取文件流有两种方式,附上代码 int length = request.getContentLength();//获取请求参数长度. byte[] bytes = new byte[length];//定义数组,长度为请求参数的长度 DataInputStream dis = new DataInputStream(request.getInputSt
浅谈webpack打包过程中因为图片的路径导致的问题

最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示: 然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下: 也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢? 先来看一下我在webpack.config.js文件中的配置: 在这里其实我的loader并没有使用错误的, 图片对应的就是使用url-loader来处理. 那么再来看一下通过webpack打包之后的目录: 发现dist文件夹中出现了我们想要打

浅谈webpack4 图片处理汇总

相关推荐

随机推荐