title: Webpack: chaining loaders
body: <p>Everything works fine when I use <code>ejs-loader</code> and <code>html-loader</code> separately:</p>
  
  <pre><code>&lt;body&gt;
      &lt;%= require('./header.html')({x:1})  %&gt;
  &lt;/body&gt;
  
  // compiles to:
  
  &lt;body&gt;
      &lt;header&gt;&lt;div&gt;1&lt;/div&gt;&lt;/header&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>But when I chain them, I'm getting js code instead of html: </p>
  
  <pre><code>module.exports = function (obj) {
  obj || (obj = {});
  var __t, __p = '';
  with (obj) {
  __p += '\n&lt;body&gt;\n  ' +
  ((__t = ( require('./header.html')({x:1})  )) == null ? '' : __t) +
  '\n&lt;/body&gt;';
  
  }
  return __p
  }
  </code></pre>
  
  <p>What is happening and how can I fix it?</p>
  
  <p>Here is my config:</p>
  
  <pre><code>const config = {
      //...
      module: {
          rules: [
              {
                  test: /\.html$/,
                  use: ['html-loader', 'ejs-loader']
              }
          ]
      },
      //...
      plugins: [
          new HtmlWebpackPlugin({
              filename: 'index.html',
              template: './src/index.html',
          })
      ]
  
  }
  </code></pre>