Asset modulesでhrefの画像パスを変換してハッシュ値をつける方法

実現したいこと

ビルドした際にindex.phpのaタグを

html

1<a href="./img/gazou.png">Link</a>

から

html

1<a href="./img/gazou.75fdsfgs54645n654.png">Link</a>

のようにしたいのですが、変換されません。

発生している問題・分からないこと

srcフォルダの画像をdistのフォルダに出力する際、
index.php(ほぼhtmlですが)内のimgタグの画像のパスを

html

1<img src="./img/gazou.png" >

から

html

1<img src="./asset/gazou.75fdsfgs54645n654.png" >

などにハッシュ値もつけて変更することはできました。
CSSファイル内の画像のパスも同様にできました。

ただ、 index.phpのaタグのhref属性の画像パスも同様に変換したいのですが、どのようにすれば良いでしょうか?

Asset modulesだけで無理でしたら、どのようなプラグインが必要でしょうか?

該当のソースコード

webpack.config.js

1 module: { 2 rules: [ 3 { 4 test: /\.php$/i, 5 loader: "html-loader", 6 }, 7 { 8 test: /\.(webp|svg)$/i, 9 type: "asset", 10 parser: { 11 dataUrlCondition: { 12 maxSize: 20 * 1042, 13 }, 14 }, 15 generator: { 16 filename: "asset/[name].[contenthash].[ext]", 17 publicPath: "./", 18 }, 19 }, 20 ] 21 }

dist ├asset └index.php src ├img ├css └index.php

試したこと・調べたこと

上記の詳細・結果

「Webpack asset modules href 画像パス 変換」などいれて検索はしてみましたが、私はhrefの画像パスについて解説されているサイトを発見することができませんでした。
なので私がなにか当たり前のことを見落としている可能性もあります。

補足

特になし

コメントを投稿

0 コメント