How to prevent webpack from minifying html file after compiling it from jade?

Question

Pug

'use strict';

const NODE_ENV = process.env.NODE_ENV || 'development';
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    context: __dirname + '/frontend',
    entry: {
        bootstrap: 'bootstrap-loader',
        app: './app'
    },
    output: {
        path: __dirname + '/public',
        publicPath: '/',
        filename: '[name].js',
        library: '[name]'
    },

    watch: NODE_ENV == 'development',
    watchOptions: {
        aggregateTimeout: 100
    },

    devtool: NODE_ENV == 'development' ? '' : null,
    plugins: [
        new ExtractTextPlugin('app.css'),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            NODE_ENV: JSON.stringify(NODE_ENV)
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery',
            "Tether": 'tether',
            "window.Tether": "tether"
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            minChunks: 2
        }),
        new HtmlWebpackPlugin({
            title: 'Test',
            template: 'index.jade',
            inject: 'head',
            minify:{
                collapseWhitespace:false
            }
        })
    ],

    module: {

        loaders: [{
            test:   /\.js$/,
            include: __dirname + '/frontend',
            loader: 'babel?presets[]=es2015'
            },
            {
                test: /\.css$/,
                loaders: [
                    'style',
                    'css?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]',
                    'postcss'
                ]
            },
            {
                test: /\.scss$/,
                loaders: [
                    'style',
                    'css?modules&importLoaders=2&localIdentName=[name]__[local]__[hash:base64:5]',
                    'postcss',
                    'sass'
                ]
            },
            { test: /\.jade$/, loader: 'jade' },
            /*{ test: /\.scss$/, loaders: ExtractTextPlugin.extract(['css', 'sass']) },*/
            { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'file?name=fonts/icon-material.[ext]' },
            // Bootstrap 4
            { test: /bootstrap[\/\\]dist[\/\\]js[\/\\]umd[\/\\]/, loader: 'imports?jQuery=jquery' }
        ]

        /*noParse: /jquery/*/

    },
    /*postcss: [autoprefixer]*/
};

if (NODE_ENV == 'production'){
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings : false,
                drop_console: false,
                unsafe: true
            }
        })
    );
}

Here is my wedpack.config.js
minify in HtmlWebpackPlugin doesn't help

Answer 1

Maybe it's too late for you, but maybe I'll help those who will google.
{ test: /\.jade$/, loader: 'jade?pretty=true' }