title: html-loader is not getting correct img src path
body: <p>(problem solved!)</p>
  <p>I am trying to use <code>html-loader</code> and <code>file-loader</code> to pack my image source which is mentioned in <code>index.html</code> <code>img</code> tag <code>src</code> attribute.</p>
  <p>But it's not working because the <code>img</code> tag <code>src</code> is not refering to the correct path.</p>
  <p>Just want to know is there anything wrong within my config?</p>
  <p>my <code>webpack</code> config:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { resolve } = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  
  module.exports = {
    entry: {
      main: ['./src/index.js', './src/scss/main.scss'],
    },
    output: {
      filename: '[name].js',
      chunkFilename: '[name].min.js',
      path: resolve(__dirname, 'build'),
  
    },
    mode: 'development',
    module: {
      rules: [
        {
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader',
            }
          ],
        },
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        },
        {
          test: /\.(jpg|png|gif)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: '/img/',
                pubicPath: '/img/'
              }
            }
          ],
        }
  
  
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: './index.html'
      })
    ]
  }</code></pre>
  </div>
  </div>
  </p>
  <p>./build  folder after run <code>webpack</code></p>
  <p><a href="https://i.stack.imgur.com/dv0S7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dv0S7.png" alt="enter image description here" /></a></p>
  <p>my <code>index.html</code>
  (I also tried to change the img src attribute to &quot;./img/women.jpg&quot; or &quot;/img/women.jpg&quot; or &quot;img/women.jpg&quot;, but nothing work but just make webpack compiling error..)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;img src="./src/img/women.jpg" alt=""&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>built <code>index.html</code> in <code>./build</code> folder
  (so what is this <code>620b11833eb3b1be1f33.jpg</code>?)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;script defer src="main.js"&gt;&lt;/script&gt;&lt;/head&gt;
  
  &lt;body&gt;
    &lt;img src="620b11833eb3b1be1f33.jpg" alt=""&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>