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