webpack minify HtmlWebpackPlugin

user_8451214 0
Viewed 12623


I'm trying to minify my html file with Webpack with HtmlWebpackPlugin plugin. I manage to make an index.html file into my dist loader, but I got some trouble to minify it.

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'
        })
    ]
}
html-webpack-plugin webpack minify javascript
3 Answers

Not sure what is the issue you are facing exactly, but you can try passing explicit parameters in your minify property instead of a boolean. For example, to remove whitespace try the following:

Try:

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

This works for me.

For the full list of options check the documentation.

user_49774020

This configuration works for my projects:

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

I had the same problem, the minify: true option did not work. Based on the document, it should work. At this time, I added the default options to make the same result.

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
}
user_52456370
Related