Still minifying during local development

[binarykitchen]

I've got this

    plugins: [
      new HtmlBundlerPlugin({
        minify: false,
        ....

For local development where NODE_ENV= development, yet the generated HTML is minified. A bug?

Using your latest version here.

[binarykitchen]

I think it's the pretty option which I am after but it has been deprecated. Why?

[webdiscus]

Well, I don't want to replace your cool HtmlBundlerPlugin with the pug-plugin ... why should I install and configure the pug-plugin separately when HtmlBundlerPlugin already has it?

And tell me, why it is the HtmlBundlerPlugin minifying all the HTML code even in DEV mode?

1. HtmlBundlerPlugin doesn't minifying when minify: false
2. The pug-plugin is the same html-bundler-webpack-plugin plus the pretty option and preconfigured preprocessor option as pug.
3. I'm the author of both pug-plugin and html-bundler-webpack-plugin
4. pug-plugin and html-bundler-webpack-plugin have the same code and the same features (pug-plugin has yet one additional pretty option)

[binarykitchen]

The html-bundler-webpack-plugin doesn't have the pretty option, because it make no sense.

Well, for me, it makes sense. Know why?

In local development, we want to inspect the HTML code, make sure it's correct. If it's not pretty, but minified, harder for human eyes to spot any errors.

Production !== Development ;)

[binarykitchen]

I'm the author of both pug-plugin and html-bundler-webpack-plugin

Nice, much respect. Thank you for your hard work.

[webdiscus]

The html-bundler-webpack-plugin doesn't have the pretty option, because it make no sense.

Well, for me, it makes sense. Know why?

Explanation

The Pug compiler generate already minified HTML code. The Pug compiler doesn't have the pretty option (deprecated and not work). Therefore, to format HTML code is required the additional dependency package js-beautify.

The html-bundler-webpack-plugin is universal plugin supported all most popular templating engines. All templating engines generate not minified HTML, except Pug. The Pug is the singe templating engines which generate minified HTML.

Because only Pug requires the additional package js-beautify, the html-bundler-webpack-plugin doesn't have this dependency to reduce the amount of dependencies and total install size. This is important.

Historically, pug-plugin was developed first, and html-bundler-webpack-plugin was developed only a year later.
The pretty option is the pug-plugin option only. In html-bundler-webpack-plugin it is not used, it makes no sense.

Therefore if you wish use the pretty option you can use the pug-plugin. In html-bundler-webpack-plugin the pretty option can't be implemented, because it makes logic conflict with the minify option.

Functionally, the pug-plugin === html-bundler-webpack-plugin.

In local development, we want to inspect the HTML code, make sure it's correct. If it's not pretty, but minified, harder for human eyes to spot any errors.
Production !== Development ;)

Yes, I agree 100%.

[binarykitchen]

Thank you for explaining, I see the conflict with the minify option.

[webdiscus]

Hello @binarykitchen,

can you please provide the webpack config completely? What is used preprocessor option?
In dependency of the preprocessor, the generated HTML can be minified by the preprocessor.
E.g., 'pug' preprocessor generate minified HTML. In this case the minify: false option take no effect.

[binarykitchen]

Okay, this is the complete JSON of the webpack config.

It's for local development only where NODE_ENV is set to development.

{
  target: 'web',
  mode: 'development',
  entry: '/home/michael-heuberger/code/binarykitchen/videomail.io/src/client/index.tsx',
  output: {
    clean: true,
    path: '/home/michael-heuberger/code/binarykitchen/videomail.io/var/local/www'
  },
  performance: { maxAssetSize: 6000000 },
  stats: { preset: 'errors-warnings' },
  resolve: { extensions: [ '.ts', '.tsx', '.json' ] },
  plugins: [
    WebpackBarPlugin {
      profile: false,
      handler: [Function (anonymous)],
      modulesCount: 5000,
      dependenciesCount: 10000,
      showEntries: true,
      showModules: true,
      showDependencies: true,
      showActiveModules: true,
      percentBy: undefined,
      options: {
        name: 'videomail.io',
        color: 'green',
        reporters: [ 'fancy' ],
        reporter: null
      },
      reporters: [ FancyReporter {} ]
    },
    HtmlBundlerPlugin {
      entryLibrary: { name: 'return', type: 'jsonp' },
      currentEntryPoint: undefined,
      exceptions: Set(0) {},
      isSnapshotInitialized: false,
      fs: null,
      compilation: null,
      promises: [],
      invalidate: [Function: bound invalidate],
      afterProcessEntry: [Function: bound afterProcessEntry],
      beforeResolve: [Function: bound beforeResolve],
      afterResolve: [Function: bound afterResolve],
      afterCreateModule: [Function: bound afterCreateModule],
      beforeLoader: [Function: bound beforeLoader],
      afterBuildModule: [Function: bound afterBuildModule],
      renderManifest: [Function: bound renderManifest],
      filterAlternativeRequests: [Function: bound filterAlternativeRequests],
      afterEmit: [Function: bound afterEmit],
      done: [Function: bound done]
    },
    FaviconsBundlerPlugin {
      pluginName: 'favicons-bundler-plugin',
      faviconResponse: null,
      faviconFile: '',
      pages: Map(0) {},
      options: {
        enabled: false,
        faviconOptions: {
          appName: 'videomail.io',
          appDescription: 'With videomail.io you can send short videos directly from your cam with an email. All automated. You could send your mum a birthday video card, greet a friend with funny face mimics. Or even email something in body or sign language. It never was so simple before.',
          developerName: undefined,
          developerURL: undefined,
          path: '/img/favicons',
          display: 'browser',
          theme_color: '#fff',
          icons: {
            android: true,
            appleIcon: true,
            appleStartup: true,
            favicons: true,
            windows: true,
            yandex: false
          }
        },
        faviconsConfig: {
          path: '/img/favicons',
          appName: 'videomail.io',
          appShortName: null,
          appDescription: 'With videomail.io you can send short videos directly from your cam with an email. All automated. You could send your mum a birthday video card, greet a friend with funny face mimics. Or even email something in body or sign language. It never was so simple before.',
          developerName: undefined,
          developerURL: undefined,
          cacheBustingQueryParam: null,
          dir: 'auto',
          lang: 'en-US',
          background: '#fff',
          theme_color: '#fff',
          appleStatusBarStyle: 'black-translucent',
          display: 'browser',
          orientation: 'any',
          start_url: '/?homescreen=1',
          version: '1.0',
          pixel_art: false,
          loadManifestWithCredentials: false,
          manifestRelativePaths: false,
          manifestMaskable: false,
          preferRelatedApplications: false,
          icons: {
            android: true,
            appleIcon: true,
            appleStartup: true,
            favicons: true,
            windows: true,
            yandex: false
          },
          output: { images: true, files: true, html: true }
        }
      }
    },
    ForkTsCheckerWebpackPlugin {
      options: {
        typescript: {
          configFile: '/home/michael-heuberger/code/binarykitchen/videomail.io/tsconfig.json',
          diagnosticOptions: { syntactic: true }
        }
      }
    },
    false,
    ESLintWebpackPlugin {
      key: 'ESLintWebpackPlugin',
      options: {
        cache: true,
        cacheLocation: 'node_modules/.cache/eslint-webpack-plugin/.eslintcache',
        extensions: 'js',
        emitError: true,
        emitWarning: true,
        failOnError: true,
        resourceQueryExclude: [],
        files: [
          '/home/michael-heuberger/code/binarykitchen/videomail.io/src/**/*.{ts,tsx}'
        ]
      },
      run: [Function: bound run] AsyncFunction
    }
  ],
  module: {
    rules: [
      { test: /\.tsx?$/, loader: 'ts-loader' },
      {
        test: /\.styl$/,
        use: [
          { loader: 'css-loader', options: { sourceMap: false } },
          {
            loader: 'stylus-loader',
            options: {
              sourceMap: false,
              stylusOptions: {
                compress: false,
                preferPathResolver: 'webpack',
                define: [
                  [ 'video-width', 400, true ],
                  [ 'video-height', 300, true ]
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.(gif|png|jpe?g|ico|svg)$/,
        type: 'asset/resource',
        generator: { filename: 'img/[name].[contenthash][ext][query]' }
      }
    ]
  },
  optimization: {
    minimize: false,
    minimizer: [
      TerserPlugin {
        options: {
          test: /\.[cm]?js(\?.*)?$/i,
          extractComments: false,
          parallel: true,
          include: undefined,
          exclude: undefined,
          minimizer: {
            implementation: [AsyncFunction: terserMinify] {
              getMinimizerVersion: [Function (anonymous)]
            },
            options: { format: { comments: false } }
          }
        }
      }
    ]
  },
  devtool: 'source-map',
  bail: true
}

[webdiscus]

Alternatively, if you won't use the pug-plugin, you can prettify the generated HTML using the postprocess callback option:

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
const formatHtml = require('js-beautify').html; // <= install the additional `js-beautify` package

const isDev = true; // <= you can self detect current mode

// formatting options: https://github.com/beautifier/js-beautify
const prettyOptions = {
  html: {
    indent_size: 2,
    end_with_newline: true,
    indent_inner_html: true,
    preserve_newlines: true,
    max_preserve_newlines: 0,
    wrap_line_length: 120,
    extra_liners: [],
    space_before_conditional: true,
    js: {
      end_with_newline: false,
      preserve_newlines: true,
      max_preserve_newlines: 2,
      space_after_anon_function: true,
    },
    css: {
      end_with_newline: false,
      preserve_newlines: false,
      newline_between_rules: false,
    },
  },
};

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        index: './src/home.pug',
      },
      preprocessor: 'pug', // use the Pug compiler
      postprocess: (content) => (isDev ? formatHtml(content, prettyOptions) : content), // pretty format of minified HTML
    }),
  ],
};

this is source code of the pug-plugin ;-)

[binarykitchen]

Thank you for the above code suggestion, although this will bloat up my webpack config, so no, thank you.

For now, if I ever want to inspect the HTML code for local development, I'll run prettier on that file