How to stop Webpack minifying HTML?

Question

I have read the part of the Webpack documentation that explains why Webpack will minify HTML when setting a loader using the module.loaders syntax. But I can't find anywhere that explains how to stop this. I am using pug-loader and html-webpack-plugin to process my templates, but Webpack always spits them out with the HTML minified.

How can I stop this?

{ test: /\.pug$/, use: 'pug-loader' } new HtmlWebpackPlugin({ title: 'Home', filename: 'index.html', template: './src/index.pug', inject: 'head', chunks: ['app'], hash: true }),

imjared · Accepted Answer · 2017-06-14 14:32:50Z

9

There's an option for html-webpack-plugin. minify: false. Have you tried adding that?

https://github.com/jantimon/html-webpack-plugin#configuration

answered Jun 14, 2017 at 14:32

imjared

20.7k4 gold badges56 silver badges76 bronze badges

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

2 Comments

Dan Over a year ago

I have tried that, the files in the dist folder are still minified though.

PAStheLoD Dec 7, 2024 at 12:54

(A bit late to the party, but...) mode: production seems to override minify: false, setting it to mode: none helps.

blackmiaool · Accepted Answer · 2017-06-23 12:16:10Z

7

+50

This issue may help you.

loaders: [ { test: /\.pug$/, exclude: /(node_modules)/, loader: "pug-html", query: { pretty: true } } ]

answered Jun 23, 2017 at 12:16

blackmiaool

5,3942 gold badges24 silver badges40 bronze badges

2 Comments

Dan Over a year ago

That is using the pug-html-loader plug in.

Dan Over a year ago

Although, that option is also available for pug-loader and works, so thanks!

mufaddal_mw · Accepted Answer · 2019-01-15 08:24:55Z

Below command works for both npm run dev and npm run prod

 module: { rules: [{ test: /\.pug$/, use: [ 'html-loader?minimize=false', 'pug-html-loader?pretty=true' ] }] },

Heyran.rs · Accepted Answer · 2021-02-18 17:18:09Z

This works for me:

rules: [{ test: /\.pug$/, use: [ { loader: 'html-loader', options: { minimize: false } }, { loader: 'pug-html-loader', options: { pretty: true } } ], }],

Does this work even with optimization: { minimizer ... } in production too?

Collectives™ on Stack Overflow

How to stop Webpack minifying HTML?

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Linked

Related