Webpackのアセット

どのプロジェクトにも、いくつかのリソースやアセット (assets)が存在します。これらのアセットは、画像、フォントファイルなどが該当します。

通常、私たちはプロジェクトフォルダからビルドフォルダへリソースを単純に移行したいと考えます。しかしここでもまた、キャッシュの問題が発生します。例えば、ブラウザは画像をキャッシュします。これはつまり、画像ファイルの名前を変えずに画像自体を変更した場合、サイトのユーザーはキャッシュされた以前のバージョンの画像を見ることになるということです。

この問題の解決策は、すでにご存知のように、ファイル名にハッシュを追加することです。 Webpackはリソースファイルをビルドフォルダへコピーし、それらにハッシュを追加し、さらに重要なことに、すべてのファイル内でこれらのリソースへのパスを新しいものに変更することを可能にします。

Webpackでは、アセットの扱いは特別なアセットモジュールを使用して行われます。それらには4つのタイプがあります: asset/resource, asset/inline, asset/source, asset。

モジュールasset/resourceは、ファイルをプロジェクトフォルダからビルドフォルダへコピーし、それらへのパスを新しいものに置き換えます。モジュールasset/inlineは、ファイルをプロジェクトフォルダから取り出し、ビルドコード内でファイルへのパスをbase64に置き換えます。モジュールasset/sourceは、ファイルをプロジェクトフォルダから取り出し、それらをテキスト文字列として返します。モジュールassetは、ファイルをビルドフォルダへコピーするか、base64に変換するかを自動的に選択します。選択はファイルサイズに依存して行われます。デフォルトでは、8kbを超えるファイルはファイルとしてビルドされます。

これらのモジュールを適用する一般的なスキームは以下のようになります:

module: {
	rules: [
		{
			test: /\.png$/,        // ファイル
			type: 'asset/resource' // モジュールタイプ
		}
	]
},

アセットとは何を意味するのか説明してください。

base64とは何か、そしてCSSでどのように使われるのか調べてみましょう。

アセット用のモジュールの4つのタイプを挙げてください。

4つのタイプのモジュールそれぞれが何のために設計されているのか説明してください。