webpack5新特性Asset?Modules資源模塊怎么用

Webpack 5 新特性：Asset Modules 資源模塊怎么用

Webpack 5 引入了許多新特性和改進，其中之一就是 Asset Modules（資源模塊）。Asset Modules 是一種新的資源處理方式，它允許我們在不借助 file-loader、url-loader 或 raw-loader 的情況下，直接處理項目中的靜態資源（如圖片、字體、JSON 文件等）。本文將詳細介紹 Asset Modules 的使用方法，并通過示例幫助大家更好地理解這一新特性。

1. 什么是 Asset Modules？

在 Webpack 5 之前，處理靜態資源通常需要借助一些額外的 loader，比如 file-loader、url-loader 或 raw-loader。這些 loader 的作用是將資源文件轉換為模塊，并輸出到構建目錄中。

Webpack 5 引入了 Asset Modules，它是一種內置的資源處理方式，可以直接在配置中使用，而無需安裝額外的 loader。Asset Modules 提供了四種資源處理模式：

1. asset/resource：將資源文件輸出到輸出目錄，并返回文件的 URL（類似于 file-loader）。
2. asset/inline：將資源文件轉換為 base64 編碼的 Data URL（類似于 url-loader 的 limit 選項）。
3. asset/source：將資源文件的內容作為字符串導出（類似于 raw-loader）。
4. asset：根據文件大小自動選擇 asset/resource 或 asset/inline（類似于 url-loader 的自動模式）。

2. 如何使用 Asset Modules？

2.1 基本配置

要使用 Asset Modules，首先需要在 Webpack 配置文件中定義資源文件的處理規則。以下是一個簡單的配置示例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

在這個配置中，我們使用 type: 'asset/resource' 來處理圖片文件。當 Webpack 遇到 .png、.jpg、.jpeg、.gif 或 .svg 文件時，它會將這些文件輸出到輸出目錄，并返回文件的 URL。

2.2 輸出文件名

默認情況下，Asset Modules 會將資源文件輸出到輸出目錄，并使用文件的哈希值作為文件名。如果你想自定義輸出文件名，可以使用 generator 選項：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]',
        },
      },
    ],
  },
};

在這個配置中，我們將圖片文件輸出到 images 目錄，并使用原始文件名作為輸出文件名。

2.3 自動選擇資源類型

如果你希望根據文件大小自動選擇 asset/resource 或 asset/inline，可以使用 type: 'asset'，并通過 parser.dataUrlCondition 設置文件大小的閾值：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 8KB
          },
        },
      },
    ],
  },
};

在這個配置中，如果圖片文件小于 8KB，Webpack 會將其轉換為 base64 編碼的 Data URL；否則，會將其輸出到輸出目錄。

2.4 處理字體文件

Asset Modules 也可以用來處理字體文件。以下是一個處理字體文件的配置示例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]',
        },
      },
    ],
  },
};

在這個配置中，我們將字體文件輸出到 fonts 目錄，并使用原始文件名作為輸出文件名。

2.5 處理 JSON 文件

Asset Modules 還可以用來處理 JSON 文件。以下是一個處理 JSON 文件的配置示例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.json$/i,
        type: 'asset/source',
      },
    ],
  },
};

在這個配置中，Webpack 會將 JSON 文件的內容作為字符串導出。

3. 示例項目

為了更好地理解 Asset Modules 的使用方法，我們來看一個完整的示例項目。

3.1 項目結構

my-project/
├── src/
│   ├── index.js
│   ├── styles.css
│   ├── images/
│   │   ├── logo.png
│   │   └── background.jpg
│   └── fonts/
│       ├── font.woff
│       └── font.woff2
├── package.json
└── webpack.config.js

3.2 配置文件

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 8KB
          },
        },
        generator: {
          filename: 'images/[name][ext]',
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]',
        },
      },
    ],
  },
};

3.3 入口文件

// src/index.js
import './styles.css';
import logo from './images/logo.png';
import background from './images/background.jpg';
import font from './fonts/font.woff2';

const img1 = document.createElement('img');
img1.src = logo;
document.body.appendChild(img1);

const img2 = document.createElement('img');
img2.src = background;
document.body.appendChild(img2);

const style = document.createElement('style');
style.innerHTML = `
  @font-face {
    font-family: 'MyFont';
    src: url(${font}) format('woff2');
  }
  body {
    font-family: 'MyFont';
  }
`;
document.head.appendChild(style);

3.4 樣式文件

/* src/styles.css */
body {
  background-color: #f0f0f0;
}

3.5 構建結果

運行 webpack 命令后，項目會構建出以下文件結構：

dist/
├── bundle.js
├── images/
│   ├── logo.png
│   └── background.jpg
└── fonts/
    └── font.woff2

4. 總結

Webpack 5 的 Asset Modules 提供了一種更簡潔、更高效的方式來處理靜態資源。通過內置的資源處理功能，我們不再需要依賴 file-loader、url-loader 或 raw-loader，而是可以直接在 Webpack 配置中使用 asset/resource、asset/inline、asset/source 或 asset 來處理資源文件。

本文詳細介紹了 Asset Modules 的使用方法，并通過一個完整的示例項目展示了如何在實際項目中使用這一新特性。希望本文能幫助你更好地理解和使用 Webpack 5 的 Asset Modules。