webpack 缩小 HtmlWebpackPlugin

Question

我正在尝试使用带有 HtmlWebpackPlugin 插件的 Webpack 缩小我的 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'
        })
    ]
}

Answer 1

不确定您面临的问题到底是什么，但您可以尝试在 minify 属性中传递显式参数而不是布尔值。例如，要删除空格，请尝试以下操作：

尝试：

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

这对我有用。

要查看选项的完整列表，请查看 documentation。

Answer 2

我遇到了同样的问题，minify: true 选项不起作用。根据文档，它应该可以工作。这个时候我加了默认选项也是一样的结果

If the minify option is set to true (the default when webpack's mode is 'production'), the generated HTML will be minified using html-minifier-terser and the following options:

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

Answer 3

此配置适用于我的项目：

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
          },
        }),

webpack 缩小 HtmlWebpackPlugin

webpack minify HtmlWebpackPlugin

javascript

minify

webpack

html-webpack-plugin