在webpack5以前，我們處理圖片資源通過 file-loader 和 url-loader 進行處理
現(xiàn)在 Webpack5 已經(jīng)將兩個 Loader 功能內(nèi)置到 Webpack 里了，我們只需要簡單配置即可處理圖片資源

webpack.config.js配置

{
  test: /\.(png|jpe?g|gif|webp)$/,
  type: "asset",
},

完整代碼如下：

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用來匹配 .css 結尾的文件
        test: /\.css$/,
        // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
      	//處理圖片文件
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
  plugins: [],
  mode: "development",
};

添加圖片資源

使用圖片資源

執(zhí)行打包命令

npx webpack

效果如下：

可以看到背景圖生效了，打包后的圖片文件會直接放到dist目錄下：

對圖片資源優(yōu)化

將小于10k的圖片資源，處理成base64格式

      {
        // 用來匹配圖片文件
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的圖片會被base64處理
          },
        },
      },

到這里可能有的小伙伴就要問了，為什么要只將小于10k的圖片資源處理成base64呢，base64格式的圖片有什么特點呢？

1. 減少HTTP請求：將小于10k的圖片處理成base64后，可以直接將圖片嵌入到HTML、CSS或JS文件中，避免額外的HTTP請求，從而加快頁面加載速度。
2. 提高頁面加載速度：在頁面加載時，base64格式的圖片可以直接從文件中讀取，而不需要到服務器請求圖片資源，從而可以減少頁面加載時間。
3. 更加安全：base64格式的圖片能直接嵌入到HTML、CSS或JS文件中，不需要通過圖片的URL來加載圖片資源，從而可以更加保護圖片資源的安全性。
4. 適用于小圖片：base64格式的圖片適合處理小圖片，因為base64編碼可以將原始圖片數(shù)據(jù)增加33%左右，如果圖片太大，會增加文件大小和頁面加載時間。

如上圖可以看到2.png只有9k,我們添加配置之后，應該會將其轉換成base64.

webpack.config.js配置

// Node.js的核心模塊，專門用來處理文件路徑
const path = require("path");

module.exports = {
  // 入口
  // 相對路徑和絕對路徑都行
  entry: "./src/main.js",
  // 輸出
  output: {
    // path: 文件輸出目錄，必須是絕對路徑
    // path.resolve()方法返回一個絕對路徑
    // __dirname 當前文件的文件夾絕對路徑
    path: path.resolve(__dirname, "dist"),
    // filename: 輸出文件名
    filename: "main.js",
    clean: true, // 自動將上次打包目錄資源清空
  },
  // 加載器
  module: {
    rules: [
      {
        // 用來匹配 .css 結尾的文件
        test: /\.css$/,
        // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
        use: ["style-loader", "css-loader"],
      },
      {
        // 用來匹配.less結尾的文件
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        // 用來匹配圖片文件
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的圖片會被base64處理
          },
        },
      },
    ],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 開發(fā)模式
};

執(zhí)行打包

npx webpack

效果如圖：

可以看到效果還是和上次沒處理base64之前一樣的

這時可以看到dist目錄下只有一張圖片了，另一張被處理成了base64,以 data URI 形式內(nèi)置到 js 中了

再補充一點自動清空上次的打包資源
只需要在output配置對象下加上clean: true就行了，如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-476483.html

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js",
    clean: true, // 自動將上次打包目錄資源清空
  },

到了這里，關于webpack處理圖片資源（jpeg,jpg,png等）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！