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

发布时间：2020-12-17 17:01:24 所属栏目：安全来源：网络整理

导读：我从这里使用webpack starter： https://github.com/AngularClass/angular2-webpack-starter 在webpack配置中,有这样的代码(我自己添加了minify选项) new HtmlWebpackPlugin({ template: 'src/index.html',chunksSortMode: 'none',minify: { collapseWhitesp

我从这里使用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)
     }
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!