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

Can you share what trouble you are facing?

ACT
– ACT

2018-09-18 07:48:31 +00:00
Commented Sep 18, 2018 at 7:48 — ACT
– ACT, Commented Sep 18, 2018 at 7:48

Richie Bendall · Accepted Answer · 2019-05-30 06:15:10Z

14

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.

edited May 30, 2019 at 6:15

Richie Bendall

9,4444 gold badges51 silver badges66 bronze badges

answered Sep 18, 2018 at 7:44

Sotiris Kiritsis

3,3563 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Renjus Over a year ago

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 ?

Sotiris Kiritsis Over a year ago

@Renjus 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.

Renjus Over a year ago

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.

bindi_m Over a year ago

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

Easwar Over a year ago

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.

|

Aleksandr Ryabov · Accepted Answer · 2020-08-28 23:58:02Z

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

andyCao · Accepted Answer · 2020-04-25 15:26:33Z

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 }

Collectives™ on Stack Overflow

webpack minify HtmlWebpackPlugin

3 Answers 3

6 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Related