Webpack压缩HTMLWebpackPlugin

Question

我正在尝试使用Webpack的HtmlWebpackPlugin插件来压缩我的html文件。我成功地将index.html文件放入了dist加载器中，但是我遇到了一些压缩它的问题。

dist/
node_modules/
src/
   ejs/
   js/
   css/
server.js
webpack.config.js
package.js

webpack.config.js :

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

    entry: './src/js/index.js',

    devtool: 'source-map',

    output: {
        publicPath: '/dist/'
    },

    module: {
        rules: [
            {
                test: /\.ejs$/,
                use: ['ejs-loader']
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                            loader: 'css-loader',
                            options: {
                                url: false,
                                minimize: true,
                                sourceMap: true
                            }
                        }]
                })
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/ejs/index.ejs',
            minify: true
        }),
        new ExtractTextPlugin({
            filename: 'main_style.css'
        })
    ]
}

- Renjus

---

你能分享一下你遇到了什么问题吗？ - ACT

Answer 1

不确定你面临的问题是什么，但你可以尝试在压缩属性中传递显式参数而不是布尔值。 例如，尝试使用以下代码来删除空格：

试试这个：

new HtmlWebpackPlugin({
    template: './src/ejs/index.ejs',
    filename: 'index.ejs',
    minify: {
        collapseWhitespace: true
    }
})

这对我有效。

要查看所有选项的完整列表，请检查文档。

- Sotiris Kiritsis

---

没错，我已经使用了多种最小化选项进行测试。这对我也有效。那么这意味着我必须将所有这些选项放入我的“webpack.config.js”中才能完全最小化我的HTML文件？ - Renjus

@Renjus 定义您所说的完全压缩HTML的含义。通常仅剥离空格就可以节省相当数量的字节。其他选项可能取决于您用于前端的库（如果有）。如果您正在使用React，则这已足够，因为其余的HTML将由JavaScript添加，我猜您已经在压缩JS文件了。 - Sotiris Kiritsis

是的，我的JS和CSS文件已经被压缩了。当我说“压缩”我的HTML时，这意味着它看起来像我的JS或CSS文件一样。没有空格，并且所有代码都在一起。如果我使用“collapseWhitespace”，我的HTML会更小，但它看起来不像我的JS或CSS。然后，我理解了你的意思。也许我不需要再做更多了。使用collapseWhitespace已足够。 - Renjus

非常感谢！我以为缩小选项是真和假的。感谢！ - bindi

https://github.com/jantimon/html-webpack-plugin#minification 表示，如果值为 true，则将应用 collapseWhitespace 和其他一些选项。但实际上并非如此。我们需要明确提供该对象。 - Easwar

它不能缩小被 <script type=text/ng-template></script> 包围的 HTML 代码。 - zipper

Answer 2

这个配置适用于我的项目：

new HtmlWebpackPlugin({
          inject: "body",
          hash: true,
          template: './src/ejs/index.ejs',
          filename: 'index.ejs',
          minify: {
            html5                          : true,
            collapseWhitespace             : true,
            minifyCSS                      : true,
            minifyJS                       : true,
            minifyURLs                     : false,
            removeAttributeQuotes          : true,
            removeComments                 : true, // false for Vue SSR to find app placeholder
            removeEmptyAttributes          : true,
            removeOptionalTags             : true,
            removeRedundantAttributes      : true,
            removeScriptTypeAttributes     : true,
            removeStyleLinkTypeAttributese : true,
            useShortDoctype                : true
          },
        }),

- Aleksandr Ryabov

Answer 3

我遇到了同样的问题，minify: true选项没有起作用。根据文档，它应该可以工作。此时，我添加了默认选项以获得相同的结果。

如果将minify选项设置为true（当webpack的模式为“production”时默认值），则将使用html-minifier-terser对生成的HTML进行缩小，并使用以下选项：

{
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  useShortDoctype: true
}

- andyCao