Webpackで階層の違うHTMLから画像パスの設定方法を教えてください

Question

**出力先**
- dist
 - img
 - index.html
 - about
   -index.html

こちらのindex.htmlとabout/index.htmlから同じimgの画像を読み込みたいのですが、
ビルドすると下記の設定の影響なのか、両方とも同じパスになって、about/index.htmlから画像が読み込めません。
どのように設定すればよろしいでしょうか？

        {
          test: /.(jpg|png|gif|svg)$/,
          use: {
            loader: 'file-loader',
            options: {
            name: './img/[name].[ext]',
            }
          }
        },

Answer 1

name: '/img/[name].[ext]',

サブディレクトリ（/dev）にアップロードする場合

options: {
publicPath: "/dev",
name: 'img/[name].[ext]',
}

Answer 2

絶対パスを使うといかがでしょうか?
name: '/img/[name].[ext]',

Comments

[komurojun]

ありがとうございます。無事表示出来ました。
例えば、テストでサブディレクトリをルートにした場合は同じく画像切れを起こしてしまいますが、

/dev/　←　アップロードした場合

教えていただいた箇所を手動で以下のように修正する認識でよろしいでしょうか？

options: {
publicPath: "/dev",
name: 'img/[name].[hash].[ext]',
}

他に正しい方法などございますでしょうか？

[new1ro]

すみません、Webpackについてあまり詳しくなく断言できないのですが、
上手く行かない場合、「/」を追加してみる、などは試したほうがいいかもしれません。

つまり以下のように「dev」と「img」がくっついてしまっているかもしれないので、
/devimg/[name].[hash].[ext]',

「/」を追加してみたりして以下のような「dev」と「img」との間に「/」が出力されるように試してみてください。
/dev/img/[name].[hash].[ext]',

[komurojun]

出来ました。ご丁寧にありがとうございます。