溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

webpack4圖片處理的示例分析

發(fā)布時(shí)間：2021-08-23 11:17:22 來(lái)源：億速云 閱讀：159 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)webpack4圖片處理的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

代碼目錄(如下圖所示)：

webpack4圖片處理的示例分析

講述 webpack4 中的圖片常用的基礎(chǔ)操作：

  1. 圖片處理 和 Base64編碼

  2. 圖片壓縮

  3. 合成雪碧圖

1. 準(zhǔn)備工作

如項(xiàng)目代碼目錄展示的那樣，除了常見的 app.js 作為入口文件，我們將用到的 3 張圖片放在 /src/assets/img/ 目錄下，并在樣式文件 base.css 中引用這些圖片。

剩下的內(nèi)容交給 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";

在處理圖片和進(jìn)行 base64 編碼的時(shí)候，需要使用 url-loader 。

在壓縮圖片的時(shí)候，要使用 img-loader 插件，并且針對(duì)不同的圖片類型啟用不同的子插件。

而 postcss-loader 和 postcss-sprites 則用來(lái)合成雪碧圖，減少網(wǎng)絡(luò)請(qǐng)求。

因此，在 npm 安裝完相關(guān)插件后， package.json 的內(nèi)容如下所示：

{
 "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"
 }
}

同時(shí)，我們編寫如下 index.html (假設(shè)已經(jīng)打包好了項(xiàng)目文件，現(xiàn)在直接引入)：

<!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 來(lái)提取樣式文件。

同時(shí)，在 module.rules 選項(xiàng)中進(jìn)行配置，以實(shí)現(xiàn)讓 loader 識(shí)別圖片后綴名，并且進(jìn)行指定的處理操作。

代碼如下：

// 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]
};

通過(guò)配置 url-loader 的 limit 選項(xiàng)，可以根據(jù)圖片大小來(lái)決定是否進(jìn)行 base64 編碼。這次配置的是：小于 20kb 的圖片進(jìn)行 base64 編碼。

2.2 打包結(jié)果

之前提到過(guò)，在項(xiàng)目中引入了 3 張圖片，其中 3.png 是小于 20kb 的圖片。在命令行中運(yùn)行 webpack 進(jìn)行打包，size 小于 20kb 的圖片被編碼，只打包了 2 個(gè) size 大于 20kb 的圖片文件：

webpack4圖片處理的示例分析

打開瀏覽器的控制臺(tái)，我們的圖片已經(jīng)被成功編碼：

webpack4圖片處理的示例分析

3. 圖片壓縮

3.1 壓縮配置

圖片壓縮需要使用 img-loader ，除此之外，針對(duì)不同的圖片類型，還要引用不同的插件。比如，我們項(xiàng)目中使用的是 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/"
   }
  }
 ]
}
// ...

替換為下方代碼即可，因?yàn)閳?zhí)行順序問(wèn)題，我們將 url-loader 的 limit 設(shè)置成 1kb，來(lái)防止壓縮后的 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 打包結(jié)果

運(yùn)行 webpack 打包，查看打包結(jié)果：

webpack4圖片處理的示例分析

是的，如你所見，10.5kb 大小的迅雷圖標(biāo)，被壓縮到了 1.8kb。圖片信息可以去 github 上查看，在文章開頭有提及 github 地址。

3.3 遺留問(wèn)題

并沒有解決 jpg 格式圖片壓縮。根據(jù) img-loader 的官方文檔 ，安裝了 imagemin-mozjpeg 插件。

但是這個(gè)插件的最新版本是 7.0.0 ，然而配置后，webpack 啟動(dòng)會(huì)用報(bào)錯(cuò)。

查看了 github 上的 issue，我將版本回退到 6.0.0 ?？梢园惭b，也可以配置運(yùn)行，正常打包。但是打包后的 jpg 圖片大小并沒有變化，也就是說(shuō)，并沒有被壓縮?。?！

希望有大佬可以指點(diǎn)一下小生，萬(wàn)分感謝

 4. 合成雪碧圖

4.1 webpack 配置

在之前的基礎(chǔ)上，配置還是很簡(jiǎn)單的，loader 的引入和環(huán)境變量都在注釋里面了：

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圖片處理的示例分析

感謝各位的閱讀！關(guān)于“webpack4圖片處理的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手