how to minify html templates using angular2 and webpack?

Question

I am using the webpack starter from here:

https://github.com/AngularClass/angular2-webpack-starter

In webpack config, there is such code (I added minify options myself)

new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: 'none',
      minify: {
        collapseWhitespace: true,
        collapseInlineTagWhitespace: true,
        // removeTagWhitespace: true,
        removeRedundantAttributes: true,
        removeEmptyAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true
      }  }),

and it minifies index.html file. But there will be many other html files as angular 2 templates in the project. How to minify them?

Other html files I saw are compiled into a javascript file - main.bundle.js

I hope it is possible with webpack. If not maybe there is some other tool?

Update

I checked https://github.com/bestander/html-minify-loader which uses https://github.com/Swaagie/minimize and here is what it writes:

Minimize does not parse inline PHP or raw template files. Templates are not valid HTML and this is outside the scope of the minimize. The output of the templaters should be parsed and minified.

So for me will not work as I understand, because they are angular 2 templates.

Answer 1

If you need templates minification on prod, you should add code below in webpack.prod.config.js (line 109):

loaders: ['raw-loader', 'html-minify-loader'],

install html-minify-loader loader:

npm install html-minify-loader --save-dev

and add specify minify options as described in docs:

 'html-minify-loader': {
     empty: true,        // KEEP empty attributes
     cdata: true,        // KEEP CDATA from scripts
     comments: true,     // KEEP comments
     dom: { // options of !(htmlparser2)[https://github.com/fb55/htmlparser2]
      lowerCaseAttributeNames: false, // do not call .toLowerCase for each attribute name (Angular2 use camelCase attributes)
     }
  }