title: Webpack file-loader outputs [object Module]
body: <p>I am using webpack with <code>HtmlWebpackPlugin</code>, <code>html-loader</code> and <code>file-loader</code>. I have a simple project structure in which I use no frameworks, but only typescript. Thus, I write my HTML code directly to <code>index.html</code>. I also use this HTML file as my template in <code>HtmlWebpackPlugin</code>.</p>
  
  <p>As all websites do I need to put an image which refers to a PNG in my assets folder. <code>file-loader</code> should load the file correctly put the new filename inside the <code>src</code> tag but that is not what is happening. Instead, as the value of <code>src</code> tag, I have <code>[object Module]</code>. I assume the <code>file-loader</code> emits some object and it is represented like this when its <code>.toString()</code> method is run. However, I can see that <code>file-loader</code> has processed the file successfully and emitted with new name to the output path. I get no errors.  Here is my webpack configuration and <code>index.html</code>.</p>
  
  <pre><code>const projectRoot = path.resolve(__dirname, '..');
  
  {
    entry: path.resolve(projectRoot, 'src', 'app.ts'),
    mode: 'production',
    output: {
      path: path.resolve(projectRoot, 'dist'),
      filename: 'app.bundle.js'
    },
    resolve: {
      extensions: ['.ts', '.js']
    },
    module: {
      rules: [
        {
          test: /\.html$/i,
          use: 'html-loader'
        },
        {
          test: /\.(eot|ttf|woff|woff2|svg|png)$/i,
          use: 'file-loader'
        },
        {
          test: /\.scss$/i,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                hmr: false
              }
            },
            {
              loader: 'css-loader',
              options: {
                sourceMap: false
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: false
              }
            }
          ]
        },
        {
          exclude: /node_modules/,
          test: /\.ts$/,
          use: 'ts-loader'
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: path.resolve(projectRoot, 'src', 'index.html')
      }),
      new MiniCssExtractPlugin({
        filename: '[name].[hash].css',
        chunkFilename: '[id].[hash].css',
        ignoreOrder: false
      })
    ]
  };
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body class="dark"&gt;
      &lt;header&gt;
        &lt;nav class="navigation"&gt;
          &lt;div class="left"&gt;
            &lt;img src="assets/logo.png" class="logo"&gt; &lt;!-- This logo is output as [object Module] --&gt;
          &lt;/div&gt;
          &lt;div class="right"&gt;
  
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Project structure:</p>
  
  <pre><code>config/
      webpack.config.js
  dist/
  src/
      styles/
      assets/
          logo.png
      index.html
      app.ts
  </code></pre>
  
  <p><strong>Edit</strong>
  My package.json dependencies:</p>
  
  <pre><code>"clean-webpack-plugin": "^3.0.0",
  "css-loader": "^3.2.0",
  "file-loader": "^5.0.2",
  "html-webpack-plugin": "^3.2.0",
  "mini-css-extract-plugin": "^0.8.0",
  "node-sass": "^4.13.0",
  "sass-loader": "^8.0.0",
  "style-loader": "^1.0.0",
  "ts-loader": "^6.2.1",
  "typescript": "^3.7.2",
  "webpack": "^4.41.2",
  "webpack-cli": "^3.3.10",
  "webpack-dev-server": "^3.9.0"
  </code></pre>