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

我使用的WebPack起動機從這裏：如何使用angular2和webpack縮小html模板？

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

在配置的WebPack，有這樣的代碼（我加了縮小選擇自己）

new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: 'none', 
     minify: { 
     collapseWhitespace: true, 
     collapseInlineTagWhitespace: true, 
     // removeTagWhitespace: true, 
     removeRedundantAttributes: true, 
     removeEmptyAttributes: true, 
     removeScriptTypeAttributes: true, 
     removeStyleLinkTypeAttributes: true 
     } }),

而且minifies index.html文件。但是項目中會有很多其他的html文件作爲角度2模板。如何縮小它們？我看到

其他HTML文件編譯成JavaScript文件 - main.bundle.js

我希望這是可能的WebPack。如果不是，也許還有其他工具？

更新

我檢查https://github.com/bestander/html-minify-loader它採用https://github.com/Swaagie/minimize這裏是它寫道：

最小化不解析內嵌PHP或原始模板文件。模板不是有效的HTML，這超出了最小化的範圍。應該對模板的輸出進行分析和縮小。

因此，對於我來說，將不會工作，因爲我明白，因爲他們是角2模板。

來源

2016-03-16 Darius.V

對於模板你可以使用'html-minify-loader'（https://github.com/bestander/html-minify-loader） –

如果您需要在PROD模板微小，你應該添加以下代碼在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) 
    } 
    }

來源

2016-03-16 10:08:17

謝謝，你真棒。我認爲這是行不通的，但是自從你寫了以後，我嘗試了，而且確實如此。我不知道爲什麼，但也沒有縮小選項，它從HTML中刪除空格。 –

使用默認選項刪除空白空間：https：//github.com/Swaagie/minimize –

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

回答

相關問題