webpack（6）webpack處理圖片

Silent丿丶黑羽發表於2021-07-11
Web

圖片處理url-loader(webpack5之前的處理方式)

在專案開發中，我們時長會需要使用到圖片，比如在img資料夾中有圖片test1.png，然後在normal.css中會引用到圖片

body{
    background: url("../img/test1.png");
}

但是此時，我們直接使用webpack打包是會報錯的，我們需要安裝url-loader，它是用於將檔案轉換為 base64 URI 的 loader。

安裝命令如下：

npm install url-loader --save-dev

url-loader 功能類似於 file-loader, 但是在檔案大小（單位為位元組）低於指定的限制時，可以返回一個 DataURL。

接著我們在webpack.config.js中配置url-loader的設定

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

此時，如果我們的圖片test1.png的大小小於8192k，那麼就可以打包成功，但是如果我們的圖片大於8192k，此時就需要安裝file-loader

安裝命令如下：

npm install file-loader --save-dev

然後，在 webpack.config.js 配置中新增 loader。例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: "dist/"
            }
          },
        ],
      },
    ],
  },
};

注意：配置時如果你同時配置了url-loader，一定要把url-loader的配置註釋掉
此時如果我們進行打包，打包出來的圖片名字是隨機的雜湊值字串，例如1b959a13f661bd214696460400b8c8d0.png，如果我們想自定義名字，則需要進行配置option選項，具體引數可以參考官網
 

資源模組

webpack5之前我們處理靜態資源比如。圖片字型之類的資源的時候等，需要用到url-loader，file-loader，raw-loader，webpack5則放棄了這三個loader，這三個loader在github上也停止了更新。

webpack5使用四種新增的資源模組（Asset Modules）替代了這些loader的功能。

  • asset/resource 將資源分割為單獨的檔案，並匯出url，就是之前的 file-loader的功能.
  • asset/inline 將資源匯出為dataURL（url(data:)）的形式，之前的 url-loader的功能.
  • asset/source 將資源匯出為原始碼（source code）. 之前的 raw-loader 功能.
  • asset 自動選擇匯出為單獨檔案或者 dataURL形式（預設為8KB）. 之前有url-loader設定asset size limit 限制實現。
     

案例

我們這裡以assert/inline為例子，進行配置

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/inline'
      },
    ],
  },
}

此時，再進行打包，png格式的圖片都會被作為 data URI 注入到 bundle 中。

相關文章