demo15 webpack 處理圖片

1.經過 url-loader 和 file-loader 處理圖片

經過 url-loader 和 file-loader 配合能夠實現：

當圖片大小 < 某個限定值（limit）時，轉換爲 base64 字符傳，並打包進 bundle 中。

當圖片大小 > 某個限定值時，將圖片放到指定目錄下，並經過 url 引用。

2.關於 url-loader

url-loader: 能夠將 css 文件中的字體和圖片 url 轉化爲 base64 字符串，從而減小對資源的發起 http 請求次數。

url-loader 的配置參數以下：

• limit {Number} : 設置一個限定值（單位字節）

  當圖片或字體的大小 < limit 時，會被轉成 base64，並打包進 bundle 中

  當圖片或字體的大小 > limit 時，默認會調用 file-loader 來處理圖片

  在沒有配置 limit (單位字節) 值的狀況下，全部大小的圖片都會被轉成base64

• mimetype {String} : 設置 base64 格式的編碼格式，沒有設置此屬性時，默認根據圖片擴展名來判斷

  例如 mimetype: 'image/png'

• fallback {String} : 當圖片或字體的大小 > limit 時，默認會使用 url-loader 來處理，也能夠經過此屬性設置其餘的 loader 來處理

  ( 注意: file-loader 和 url-loader 共享同一個 options , file-loader 和 url-loader 的 option 是不衝突的 )

配置示例:

(處理圖片)

{
  test: /\.(png|jpg|jpeg|gif)$/, // 處理圖片
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192, // size <= 8KB
          name: 'img/[hash].[ext]', // 屬於file-loader的屬性
          publicPath: "fonts/",  // 屬於file-loader的屬性
          outputPath: "fonts/"  // 屬於file-loader的屬性
        }
      }
    ]
}
複製代碼

(處理字體)

{
  test: /\.(eot|woff2?|ttf|svg)$/, // 處理字體
    use: [
      {
        loader: "url-loader",
        options: {
        limit: 5000, // size <= 5KB
          name: "[name]-[hash:5].min.[ext]", // 屬於file-loader的屬性
          publicPath: "fonts/",  // 屬於file-loader的屬性
          outputPath: "fonts/"  // 屬於file-loader的屬性
        }
      }
    ]
}
複製代碼

3.關於 file-loader

實現對文件進行處理，好比修改文件名，而且輸出到指定的路徑，file-loader 能夠單獨使用，也能夠與 url-loader 一塊兒使用。

url-loader 在處理圖片或字體時，當文件的大小大於 limit 時，默認使用 file-loader 來處理。

file-loader 的配置參數以下：

• name

  • [name] 原文件名字，不包含擴展名
  • [hash:8] hash 值，默認是 32 位
  • [ext] 原文件擴展名
  • [path] 其實是相對於 context 的路徑，context 默認是 webpack.config.js 的路徑

• context 影響[path],默認爲 webpack.config.js context

• publicPath 打包後資源文件的引用會基於此路徑，也能夠設置爲 cdn：https://www.xxx.com/img。（默認使用 output 的 publicPath 屬性）

• outputPath publicPath/outputPath/[name].[ext]

4.目錄結構

這裏準備了三張圖片，大小分別是：18.6k、12.1k、14.9k。並設置 limit:15360 (15k)，

// `--` 表明目錄， `-` 表明文件
  --demo15
    --src
      --assets
        --imgs
          -1.png //18.6KB
          -2.png //12.1KB
          -3.png //14.9KB
        --styles
          -app.css
      -app.js
    -index.html
    -webpack.config.js
複製代碼

src/assets/styles/app.css

*,
body {
  margin: 0;
  padding: 0;
}

.container div{
  width:200px;
  height: 200px; 
  float: left;
}
.div1{
  background: url("../imgs/1.png") no-repeat;
}

.div2{
  background: url("../imgs/2.png") no-repeat;
}

.div3{
  background: url("../imgs/3.png") no-repeat;
}
複製代碼

src/app.js

// 同步加載
import "./assets/styles/app.css";

// window.addEventListener("click", function () {
// // 試試異步加載? 查看瀏覽器控制檯試試
// import("./assets/styles/app.css");
// });
複製代碼

5.安裝相關依賴

npm install -D css-loader style-loader
npm install -D file-loader url-loader
npm install -D html-webpack-plugin webpack 
複製代碼

6.編寫 webpack 配置文件

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包後資源文件的引用會基於此路徑
    path: path.resolve(__dirname, "dist"), // 打包後的輸出目錄
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // 以<style>標籤形式引用css
        use: [
          "style-loader",
          "css-loader"
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 15360, // size <= 15KB, 改爲15257(<14.9KB)試試? 
              name: "[name]-[hash:5].min.[ext]", // 設置文件名(>limit的狀況)
              publicPath: "static/", // 設置資源文件的引用根路徑
              outputPath: "static/" // publicPath/outputPath/[name].[ext]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ // 自動生成html,而且自動導入全部依賴同步包
      filename: "index.html",
      template: "./index.html",
      minify: {
        // collapseWhitespace: true // 壓縮
      }
    }),
  ]
};
複製代碼

7.執行打包命令

(默認你已經安裝了全局 webpack 以及 webpack-cli )

webpack
複製代碼

8.驗證打包結果

輸出結果:

--dist
  --static
    -1-bd4ee.min.png //18.6KB
  -app.bundle.js
  -index.html
複製代碼

2.png (12.1KB) 和 3.png (14.9KB) 被轉換成 base64 字符串並打包進 app.bundle.js 中。

1.png(18.6KB) => 1-bd4ee.min.png

把 limit 改爲 15257 (<14.9KB) 試試?

9.源碼地址

demo 代碼地址: github.com/SimpleCodeC…

倉庫代碼地址(及目錄): github.com/SimpleCodeC…