【webpackでの失敗備忘録1】ビルドしたhtmlでimgのパスが変わらない【url-loader】

問題

ビルド前のhtmlに記述した<img src="">のパスがビルド後も変わらなかったこと。

ディレクトリ構成

/
└index.html
└img/
　 └hoge.jpg

設定ファイル

▼webpack.config.js

{
  test: /\.(jpe?g|png|gif|svg|ico)$/,
  loader: 'url-loader',
  options: {
    limit: 2048,
    name: '[name].[ext]',
    esModule: false,
    outputPath: 'images/',
    publicPath: function (path) {
      return {buildPath} + path;
    },
  }
},

※{buildPath}はここには書けないので割愛。

▼html
<img src="/img/hoge.jpg" alt="hoge">

コンパイル後のhtml

<img src="/img/hoge.jpg" alt="hoge">

変わらねえ〜〜〜〜

原因

指定したパスにimgディレクトリが無かったため。
指定した場所に画像が無ければローダーは読み込めないよ！！
下記のようにディレクトリ構造に合わせてパスを指定すると、問題なくwebpack.config.jsの設定通りにパスが書きかわりました。

▼html
<img src="./img/hoge.jpg" alt="hoge">

コンパイル後のhtml

<img src="{buildPath}/hoge.jpg" alt="hoge">

解決