Webpack 5 Asset Modules

Webpack 4 的資源處理

Webpack 5 以前會使用 url-loader 及 file-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-loader 及 file-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 當中：

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

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

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 設定檔案大小的條件：

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：

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

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