template-option.md

The template option

History

The version 2.x which was introduced last year (Sep, 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 lodash loader kicks in.

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

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

2) Setting a loader directly for the template

new HtmlWebpackPlugin({
  // For details on `!!` see https://webpack.github.io/docs/loaders.html#loader-order
  template: '!!handlebars!src/index.hbs'
})

3) Setting a loader using the module.loaders syntax

{
  module: {
    loaders: [
      {
        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 fallback loader.

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