Question

我在这里使用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，这是它写的内容：

最小化不会解析内联PHP或原始模板文件。模板是无效的HTML，这超出了最小化的范围。该应该解析和缩小模板的输出。

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

Answer 1

如果您需要在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)
     }
  }

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

1 个答案: