如何使用 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 文件作为 angular 2 模板。如何缩小它们？

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

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

更新

我检查了 https://github.com/bestander/html-minify-loader which uses 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)
     }
  }

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

how to minify html templates using angular2 and webpack?

minify

webpack

angular