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

Question

我正在使用这里的 webpack starter:

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

在webpack config中，有这样的代码(我自己加了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文件作为angular 2模板。如何缩小它们？

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

我希望 webpack 可以实现。如果没有，也许还有其他工具？

更新

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

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.

所以对我来说不会像我理解的那样工作，因为它们是 angular 2 模板。

Answer 1

如果您需要在产品上缩小模板，您应该在 webpack.prod.config.js 中添加以下代码 (line 109) :

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

安装html-minify-loader加载器:

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

并添加指定缩小选项为 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)
     }
  }