Skip to content

Webpack 5 Asset Modules

Webpack 4 的資源處理

Webpack 5 以前會使用 url-loaderfile-loader 來處理 JS 引入的外部資源,看是要以 base64 的方式直接 inline 在 source code 當中,或獨立輸出。

  • url-loader 設定 limit 選項值決定檔案大小,如果檔案大小小於該值,就會將檔案直接 inline 在打包的 js 當中。 fallback 選項預設值為 file-loader,當檔案大小超過 limit 設定時,就會交給 file-loader 處理。
  • file-loader 無需特別設定此 loader,只需要設定好 url-loader,藉由它的 fallback 選項共用同一組設定。

Webpack 5 Asset Modules

Asset Modules 取代了 url-loaderfile-loader 的功能,又可以少安裝一些 loader 了 🎉

只需在每一則 rule 中聲明 type

  • asset/resource 輸出成獨立檔案。
  • asset/inline 使用 data URI 輸出內容。
  • asset/source 使用原生內容,不做任何處理。
  • asset 預設以 8kb 為條件,檔案大於該值使用 asset/resource,小於該值使用 asset/inline

webpack.config 設定範例:

將圖檔一律用 data URI 的形式,直接 inline 在 source code 當中:

js
module.export = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp|svg)(\?.*)?$/,
        type: 'asset/inline',
      },
    ],
  },
}

將圖檔一律輸出成獨立檔案,於輸出目錄的 img 目錄內:

js
module.export = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp|svg)(\?.*)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'img/[name].[hash:8][ext]'
        }
      },
    ],
  },
}

將圖檔一律輸出成獨立檔案,於輸出目錄的 img 目錄內,可以用 parser.dataUrlCondition.maxSize 設定檔案大小的條件:

js
module.export = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp|svg)(\?.*)?$/,
        type: 'asset',
        generator: {
          filename: 'img/[name].[hash:8][ext]'
        },
        // 如果要改變預設的 8kb 條件,可以在這裡設定
        // parser: {
        //   dataUrlCondition: {
        //     maxSize: 4 * 1024 // 4kb
        //   }
        // }
      },
    ],
  },
}

Vue CLI 5 的設定範例

Vue CLI 5 對圖檔資源的預設行為為 asset,也就是會以 8kb 為條件,檔案大於該值使用 asset/resource,小於該值使用 asset/inline

要更改這個設定的方法是在 vue.config.js 中設定 chainWebpack

js
module.exports = {
  chainWebpack: config => {
    config.module.rule('images').set("type", "asset/inline").delete("generator");
  },
}

當指定為 asset/inline 就無法宣告檔案的輸出路徑 generator.filename,所以這邊的範例要刪除 generator 的設定。

Written By
YI FENG XIE
YI FENG XIE

Creative Problem Solver