title: How does html-webpack-plugin work with html-loader?
body: <p>I thought a loader is invoked only when some resource is <em>import</em>ed or <em>require</em>d somewhere and the resources match with such a loader. </p>
  
  <p>But in the following codes, no html file is imported anywhere but the html-loader is still necessary to make the compilation pass because of the underscore template stuff in the html. </p>
  
  <p>So I have the following questions:</p>
  
  <ol>
  <li>When does the html-loader come to play? After or before the bundle is generated?</li>
  <li>Why does webpack invoke the html-loader? Because of the template setting in the plugin?</li>
  <li><p>Does the plugin use the output of the loader? But the output is just a string and how could it make a difference?</p>
  
  <pre><code>//webpack.config.js
  const webpack = require('webpack');
  const path = require('path');
  const htmlPlugin = require('html-webpack-plugin');
  module.exports = {
      entry: {
          a: './a.js'
      },
      output: {
      filename: '[name].[chunkhash].js',
      chunkFilename: '[name].[chunkhash].js',
      path: path.resolve(__dirname, 'dist')
  },
  module: {
      rules: [
      {
        test: /\.html$/,
        loader: "html-loader"
      }
      ]
  },
  plugins: [
          new htmlPlugin({
          template:path.resolve(__dirname,'index.html')
  
      })
  ]
  };  
  
  //index.html
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script id="item-template" type="text/template"&gt;    
          &lt;label&gt;&lt;%= title %&gt;&lt;/label&gt;
        &lt;/script&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre></li>
  </ol>