template-option.md

The template option

History

The version 2.x which was introduced 2015 changed the way the template is processed. Instead of forcing all users to use the blueimp template engine it allowed to use any webpack loader:

• pug
• ejs
• underscore
• handlebars
• html-loader
• ...

Under the hood it is using a webpack child compilation which inherits all loaders from your main configuration.

There are three ways to set the loader:

1) Don't set any loader

By default (if you don't specify any loader in any way) a fallback ejs loader kicks in. Please note that this loader does not support the full ejs syntax as it is based on lodash template.

{
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ];
}

Be aware, using .html as your template extension may unexpectedly trigger another loader.

2) Setting a loader directly for the template

new HtmlWebpackPlugin({
  // For details on `!!` see https://webpack.js.org/concepts/loaders/#inline
  template: "!!handlebars-loader!src/index.hbs",
});

3) Setting a loader using the module.rules syntax

{
  module: {
    rules: [
      {
        test: /\.hbs$/,
        loader: 'handlebars-loader'
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.hbs'
    })
  ]
}

However this also means that in the following example webpack will use the html loader for your template. This will cause html minification and it will also disable the ejs/lodash fallback loader.

{
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader'
      }],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}