title: Webpack 4 generates wrong src path for img tags in different levels of folder structure
body: <p>I have a Webpack 4 project to make a multi language admin-dashboard with this folder and file structure:</p>
  
  <pre><code>admin-dashboard
  |
  |--build
  |  |--assets
  |  |  |--img
  |  |  |--font
  |  |--fa
  |  |  |--index.html ----&gt; rtl html output (gets wrong img src like "assets/img/img.png")
  |  |--index.html    ----&gt; ltr html output (gets right img src like "assets/img/img.png")
  |  |--style.css
  |  |--style-rtl.css
  |  |--script.js
  |  |--script-rtl.js
  |
  |--config   ---&gt; containing my Webpack config files for production and development
  |  |--webpack.dev.js
  |  |--webpack.prod.js
  |
  |--node_modules
  |--src
  |  |--assets
  |  |  |--img
  |  |  |--font
  |  |
  |  |--i18n
  |  |  |--fa
  |  |  |  |--index.html ----&gt; rtl html template ---&gt; &lt;img src="../../assets/img/img.png" /&gt;
  |  |  |--index.html    ----&gt; ltr html template ---&gt; &lt;img src="../assets/img/img.png" /&gt;
  |  |
  |  |--js
  |  |--locales
  |  |--scss
  |  |--templates
  |
  |--.babelrc
  |--package.json
  |--postcss.config.js
  </code></pre>
  
  <p>The paths of images in <code>i18n</code> folder in my <code>src</code> folder are correct while developing the project but when I build the project it makes a <code>build</code> folder in root of project with its own assets folder. As you can see in file structure above, the ltr html file in build folder has the correct path to assets folder placed in build folder but the rtl version in <code>fa</code> folder refers to the same path which is wrong. These 2 files make based on 2 html files in <code>src/i18n</code>. Plus all links to favicon images in header of the both html files remain intact in built version of files which is another problem but other injected links done by Webpack html plugin all injected correctly with correct paths in both html files.</p>
  
  <p>This is my webpack configuration for production mode:
  <code>webpack.prod.js</code>:</p>
  
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const TerserJSPlugin = require('terser-webpack-plugin');
  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  
  module.exports = {
    entry: {
      main: './src/js/main.js',
      'main-rtl': './src/js/main-rtl.js',
    },
    output: {
      path: path.join(__dirname, '../build'),
      filename: '[name].[chunkhash:8].bundle.js',
      chunkFilename: '[name].[chunkhash:8].chunk.js',
    },
    mode: 'production',
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader', 
          },
        },
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader', 
            'postcss-loader', 
            'sass-loader',
          ],
        },
        {
          test: /\.(png|svg|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader', 
              options: {
                name: '[name].[ext]',
                outputPath: 'assets/img',
                esModule: false,
              },
            },
          ],
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            {
              loader: 'file-loader', 
              options: {
                name: '[name].[ext]',
                outputPath: 'assets/font',
              },
            },
          ],
        },
        {
          test: /\.html$/i,
          use: {
            loader: 'html-loader',
            options: {
              attributes: {
                list: [
                  {
                    tag: 'img',
                    attribute: 'src',
                    type: 'src',
                  },
                  {
                    tag: 'img',
                    attribute: 'srcset',
                    type: 'srcset',
                  },
                  {
                    tag: 'img',
                    attribute: 'data-src',
                    type: 'src',
                  },
                  {
                    tag: 'img',
                    attribute: 'data-srcset',
                    type: 'srcset',
                  },
                ],
  
              },
            },
          },
        },
      ],
    },
    optimization: {
      minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
      splitChunks: {
        cacheGroups: {
          commons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
          },
        },
        chunks: 'all',
      },
      runtimeChunk: {
        name: 'runtime',
      },
    },
    plugins: [
      // load jQuery
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
      }),
  
      new CleanWebpackPlugin(),
  
      new MiniCssExtractPlugin({
        filename: '[name].[chunkhash:8].bundle.css',
        chunkFilename: '[name].[chunkhash:8].chunk.css',
      }),
  
      new HtmlWebpackPlugin({
        chunks: ['main'],
        template: 'src/i18n/index.html',
        filename: 'index.html',
      }),
      new HtmlWebpackPlugin({
        chunks: ['main-rtl'],
        template: 'src/i18n/fa/index.html',
        filename: 'fa/index.html',
      }),
  
    ],
  };
  </code></pre>
  
  <p>So, the problem is when I build the project with my webpack.prod.js config, it gives me 2 html files in build folder for ltr and rtl directions which in rtl version index.html it generates wrong src path for img tags and in both files it doesn't change the paths of favicon links and the mentioned links remain the same as source html files but other links which are injected with Webpack html plugin are all correctly injected with correct paths in each html file.</p>
  
  <p>I need 2 html files generate with correct img tag src paths based on any level which the file is in the folder structure.</p>
  
  <p>any help will be so much appreciated. </p>