How does html-webpack-plugin work with html-loader? : <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>
