webpack minify HtmlWebpackPlugin

Question

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'
        })
    ]
}

Kathernkatheryn

Can you share what trouble you are facing? – Lipsey

Answer 1

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.

Mustang

You right. I have already tested it with multi minify options. That also worker for my. So that mean, I have to put all these options in my webpack.config.js to completly minify my html file ? – Kathernkatheryn

@Kathernkatheryn Define what you mean by completely minifying your html. Usually just stripping whitespace will save you a considerable amount of bytes. The other options can depend on the library(if any) you are using for your front-end. If you are using React this is enough, since the rest of the HTML will be added by javascript and I'm guessing you already are minifying your js files. – Mustang

Yes my js and css files are already minified. When I said "minify" my html, that mean it look like my js or css files. No space and all the code following each other. If I use collapseWhitespace, my html is smaller but it don't look like my js or css. After, I understand what you said. Maybe I don't need to do more. Using collapseWhitespace is enough. – Kathernkatheryn

Very very thank you! I thought that the minify options are true and false. KANSHA! – Cockshy

github.com/jantimon/html-webpack-plugin#minification states that if the value is true, collapseWhitespace along with some other options would be applied. But apparently that is not the case. We need to provide the object explicitly. – Upheld

it cannot minify the html code surrounded by <script type=text/ng-template></script>. – Blear

Answer 2

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

Arte

Answer 3

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
}

Conqueror