2016-03-16 5 views
3

Я использую WebPack стартер здесь:Как уменьшить html-шаблоны с помощью angular2 и webpack?

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-файлы, которые я видел компилируются в файл яваскрипта - main.bundle.js

Я надеюсь, что это возможно с WebPack. Если нет, возможно, есть и другой инструмент?

Update

https://github.com/bestander/html-minify-loader Я проверил, который использует https://github.com/Swaagie/minimize и вот что он пишет:

Минимизация не разобрать встроенный PHP или сырые файлы шаблона. Шаблоны недействительны HTML, и это выходит за рамки минимизации. Выходной сигнал шаблонов должен анализироваться и оцениваться.

Так что для меня не будет работать, поскольку я понимаю, потому что они являются угловыми 2 шаблонами.

+0

Для шаблонов вы можете используйте 'html-minify-loader' (https://github.com/bestander/html-minify-loader) –

ответ

7

Если вам нужны шаблоны минификация на прод, вы должны добавить код, приведенный ниже в 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) 
    } 
    } 
+0

спасибо, ты потрясающий. Я думал, что это не сработает, но с тех пор, как вы написали, я попробовал, и это так. Я не уверен, почему, но и без параметров minify удаляет пробелы из html. –

+0

Пробелы удалены с настройками по умолчанию: https://github.com/Swaagie/minimize –