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

前端之家收集整理的这篇文章主要介绍了如何使用angular2和webpack缩小html模板?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我从这里使用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 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.

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

解决方法

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

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

安装html-minify-loader loader:

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

并将指定minify选项添加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)
     }
  }

猜你在找的Angularjs相关文章