モジュールバンドラで画像を扱う【webpack5】

動作確認時の環境は以下。(2021/08/10時点)

// package.jsonから一部抜粋
"devDependencies": {
    "autoprefixer": "^10.3.1",
    "css-loader": "^6.2.0",
    "postcss-loader": "^6.1.1",
    "sass": "^1.37.5",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.49.0",
    "webpack-cli": "^4.7.2"
}

学習中のwebpack講座は以下。(超わかりやすい上、無料。)

フロントエンドウェブ開発の無料チュートリアル - 現役エンジニアのためのWebpack環境構築入門 with Babel｜Sass｜Eslint

ただし、講座ではwebpack4で解説される。
そしてwebpack5では、webpack4とは画像の扱いが異なり、
これまで必要だったfile-loaderが不要となった。

→参考ドキュメント

To v5 from v4 | webpack

If you have rules defined for loading assets using raw-loader, url-loader, or file-loader, please use Asset Modules instead as they're going to be deprecated in near future.
// file-loaderを使用しているなら、代わりにAsset Modulesを使用せよ。

画像を扱うための、
webpack.config.jsの定義方法を２つ記載する。
(参考までにwebpack4の記述方法も記載。)

▶︎webpack4

// module.rulesから定義を抜粋
{
    test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: "[name].[ext]",
                outputPath: "images",
                publicPath: "images",
            },
        },
    ],
}

この定義をwebpack5のルールに従って変更する。

▶︎ひとつめ

outputに出力ディレクトリを指定する。

output: {
    // ...
    assetModuleFilename: "images/[hash][ext][query]",
    publicPath: "http://127.0.0.1:5500/public/", // 画像がCDNの場合の指定方法
},

// module.rulesから定義を抜粋
{
    test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/,
    type: "asset/resource",
}

▶︎ふたつめ

module.rulesにgeneratorを定義する。

// module.rulesから定義を抜粋
{
    test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/,
    type: "asset/resource",
    generator: {
        filename: "images/[hash][ext][query]",
    },
}

ともに公式ドキュメントにも記載がある。

Asset Modules | webpack

以上。