Wrong usage of the html-webpack-plugin

[jantimon]

Hi all,

thanks for promoting to use the html-webpack-plugin in your quick start tutorial.

There is one very very small mistake which causes people to open the same issue for my plugin over and over again.

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:

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

There are two ways to set the loader:

1. Setting it directly for the template:

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

Setting it using the module.loaders syntax:

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

However this also means that if you use a html template like suggested in your docs:

    new HtmlWebpackPlugin({
      template: 'src/index.hbs'
    })

The module.loader syntax for .html files will kick in and process the html files. This works in most cases however it might be cause unexpected behaviour.

By default (if you don't specify any loader in any way) a fallback ejs loader kicks in.

What can you do?

Please please update your documentation in one of the following ways:

1. Use the raw loader: template: '!!raw!src/index.html' (requires the raw loader)
2. Use another extension : template: 'src/index.ejs'

Thanks 👍

[Foxandxss]

Hello sir.

In the past I had a discussion with someone (could be even you) when I updated my own starter to use the version 2 of the plugin and the solution was something like that.

Now, that doesn't mean that if I am doing wrong now, I shouldn't fix this.

Say I want to use the html-loader for index.html because the users would like to have images on it. Also I don't want to rename the index file to anything than index.html.

Could I be able to do something like:

template: '!!html!src/index.html'

I am trying to see what the other big starters for angular does and seems like we are all doing to wrong :/

Thank you sir.

[jantimon]

@Foxandxss template: '!!html!src/index.html' would be valid and add all the image assets for you - however be aware of the build in minification of the html-loader. If you don't need it use !!html?-minimize!src/index.html

[Foxandxss]

As today we have this:

  htmlLoader: {
    minimize: false // workaround for ng2
  },

Do I still need that loader for the plugin? And is that a external library?

[jantimon]

I guess if you configured the html loader that way you can also just pass template:'src/index.html' but I don't know the internals of the html-loader good enough.

My intention of this issue is to make sure that you understand that template:'...' will be turned into a webpack require('...') and therefore it makes use of the loaders.

[Foxandxss]

html-loader minimization is broken for ng2 (I would need to check again). I had to disable it or otherwise it wouldn't be able to create a build production.

So lets go back to square one. What's the problem as today with this config? I mean, what are the users seeing that they are reporting those errors?

I want to ping @TheLarkInn because he knows more about webpack and he could shed some light for me.

[jantimon]

Well https://angular.io/docs/ts/latest/guide/webpack.html has examples which minify the html and people keep asking me why the html-webackp-plugin minifies the html although it's the html-minifier and not the plugin 😉

[Foxandxss]

But that guide has the minimize: false I commented you earlier.

If there is something I can use to reproduce it locally with this config, I would gladly try and fix it.

[TheLarkInn]

@jantimon thanks for the follow-up on this. Can you link one of those common github issues you are getting on your repo because of this. I wanna better understand the problem.

[jantimon]

e.g. https://github.com/ampedandwired/html-webpack-plugin/issues/363

[Foxandxss]

Oh, I can reproduce it now.

I tried:

new HtmlWebpackPlugin({
  template: '!!html!src/index.html',
  minify: false
})

With no luck.

I could use raw for the index, but what if the user wants to add an image say:

<img src="foo" />

Without html-loader they can't, unless you copy the image over the dist folder.

I definitely don't want the minification because it breaks the index.html if you add angular2 code to it.

Why can't I use html-loader and disable minification? Should we raise an issue somewhere?

[aboutqx]

So there is no other way?We have to rename html to ejs?