如何使用angular2和webpack缩小html模板？

Question

我从这里使用webpack starter:

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

在webpack配置中,有这样的代码(我自己添加了minify选项)

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

它缩小了index.html文件.但是在项目中还会有许多其他html文件作为角度2模板.如何缩小它们？

我看到的其他html文件被编译成一个javascript文件 - main.bundle.js

我希望有可能与webpack.如果没有,也许还有其他工具？

更新

我检查了https://github.com/bestander/html-minify-loader,它使用https://github.com/Swaagie/minimize,这里写的是:

Minimize不会解析内联PHP或原始模板文件.模板不是有效的HTML,这超出了最小化范围.应该解析和缩小模板的输出.

所以对我来说不会像我理解的那样工作,因为它们是有角度的2模板.

Answer 1

如果你需要在prod上进行模板缩小,你应该在webpack.prod.config.js (第109行)中添加以下代码:

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

安装html-minify-loader加载器:

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

并添加指定minify选项,如文档中所述:

 '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)
     }
  }