npmpackage.info

Gathering detailed insights and metrics for html-minimizer-webpack-plugin

Other packages similar to html-minimizer-webpack-plugin

css-minimizer-webpack-plugin-sass-loader-ariel-html-webpack-plugin

1.2.3

Adexe Created Npm Publish store to check for the client purpose Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

Gathering detailed insights and metrics for html-minimizer-webpack-plugin

html-minimizer-webpack-plugin - 5.0.2 | npmpackage.info

html-minimizer-webpack-plugin

HTML minimizer webpack plugin

5.0.2

MIT

JavaScript

51.80 kB

6.1

Installations

npm install html-minimizer-webpack-plugin

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>= 18.12.0

Node Version

22.13.1

NPM Version

10.9.2 Pull Requests

Open

0

Total

154

Closed

7

Merged

147

Issues

Open

0

Total

1

Closed

1

Releases

v5.0.2

Updated on Apr 07, 2025

v5.0.1

Updated on Mar 06, 2025

v5.0.0

Updated on Jan 17, 2024

v4.4.0

Updated on Jun 10, 2023

v4.3.0

Updated on Oct 13, 2022

v4.2.1

Updated on Oct 06, 2022

View All 22 releases

Languages

JavaScript

JavaScript (100%)

Developer

webpack-contrib

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

16 Stars

220 Commits

6 Forks

9 Watchers

1 Branches

25 Contributors

Updated on Jun 20, 2025

Sponsor this package

https://opencollective.com/webpack

Maintainers

View All 25 Contributors

Package Meta Information

Latest Version

5.0.2

Package Id

html-minimizer-webpack-plugin@5.0.2

Unpacked Size

51.80 kB

Size

12.52 kB

File Count

NPM Version

10.9.2

Node Version

22.13.1

Published on

Apr 07, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

html-minimizer-webpack-plugin

This plugin can use 3 tools to optimize and minify your HTML:

swc - very fast Rust-based platform for the Web.
html-minifier-terser (by default) - JavaScript-based HTML minifier.
@minify-html/node - A Rust HTML minifier meticulously optimised for speed and effectiveness, with bindings for other languages.

Getting Started

To begin, you'll need to install html-minimizer-webpack-plugin:

1npm install html-minimizer-webpack-plugin --save-dev

1yarn add -D html-minimizer-webpack-plugin

1pnpm add -D html-minimizer-webpack-plugin

Additional step: If you want to use @swc/html you need to install it:

1npm install @swc/html --save-dev

1yarn add -D @swc/html

1pnpm add -D @swc/html

Additional step: If you want to use @minify-html/node you need to install it:

1npm install @minify-html/node --save-dev

1yarn add -D @minify-html/node

1pnpm add -D @minify-html/node

Then add the plugin to your webpack configuration. For example:

webpack.config.js

1const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
2const CopyPlugin = require("copy-webpack-plugin");
3
4module.exports = {
5  module: {
6    rules: [
7      {
8        test: /\.html$/i,
9        type: "asset/resource",
10      },
11    ],
12  },
13  plugins: [
14    new CopyPlugin({
15      patterns: [
16        {
17          context: path.resolve(__dirname, "dist"),
18          from: "./src/*.html",
19        },
20      ],
21    }),
22  ],
23  optimization: {
24    minimize: true,
25    minimizer: [
26      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
27      // `...`
28
29      // For `html-minifier-terser`:
30      //
31      new HtmlMinimizerPlugin(),
32
33      // For `@swc/html`:
34      //
35      // HTML documents - HTML documents with `Doctype` and `<html>/`<head>`/`<body>` tags
36      //
37      // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L5
38      //
39      // new HtmlMinimizerPlugin({
40      //   minify: HtmlMinimizerPlugin.swcMinify,
41      //   minimizerOptions: {}
42      // })
43      //
44      //
45      // HTML fragments - HTML fragments, i.e. HTML files without doctype or used in `<template>` tags or HTML parts which injects into another HTML parts
46      //
47      // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L38
48      //
49      // new HtmlMinimizerPlugin({
50      //   minify: HtmlMinimizerPlugin.swcMinifyFragment,
51      //   minimizerOptions: {}
52      // })
53    ],
54  },
55};

This will enable HTML optimization only in production mode. If you want to run it also in development set the optimization.minimize option to true.

And run webpack via your preferred method.

[!NOTE]

Removing and collapsing spaces in the tools differ (by default).

@swc/html - remove and collapse whitespaces only in safe places (for example - around html and body elements, inside the head element and between metadata elements - <meta>/script/link/etc.)

html-minifier-terser - always collapse multiple whitespaces to 1 space (never remove it entirely), but you can change it using options

@minify-html/node - please read documentation https://github.com/wilsonzlin/minify-html#whitespace

Options

test
include
exclude
parallel
minify
minimizerOptions

`test`

Type:

1type test = string | RegExp | Array<string | RegExp>;

Default: /\.html(\?.*)?$/i

Test to match files against.

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        test: /\.foo\.html/i,
7      }),
8    ],
9  },
10};

`include`

Type:

1type include = string | RegExp | Array<string | RegExp>;

Default: undefined

Files to include.

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        include: /\/includes/,
7      }),
8    ],
9  },
10};

`exclude`

Type:

1type exclude = string | RegExp | Array<string | RegExp>;

Default: undefined

Files to exclude.

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        exclude: /\/excludes/,
7      }),
8    ],
9  },
10};

`parallel`

Type:

1type parallel = undefined | boolean | number;

Default: true

Use multi-process parallel running to improve the build speed. Default number of concurrent runs: os.cpus().length - 1 or os.availableParallelism() - 1 (if this function is supported).

[!NOTE]

Parallelization can speed up your build significantly and is therefore highly recommended.

`boolean`

Enable/disable multi-process parallel running.

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        parallel: true,
7      }),
8    ],
9  },
10};

`number`

Enable multi-process parallel running and set number of concurrent runs.

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        parallel: 4,
7      }),
8    ],
9  },
10};

`minify`

Type:

1type minify =
2  | ((
3      data: { [file: string]: string },
4      minimizerOptions: {
5        [key: string]: any;
6      },
7    ) => {
8      code: string;
9      errors?: unknown[] | undefined;
10      warnings?: unknown[] | undefined;
11    })
12  | ((
13      data: { [file: string]: string },
14      minimizerOptions: {
15        [key: string]: any;
16      },
17    ) => {
18      code: string;
19      errors?: unknown[] | undefined;
20      warnings?: unknown[] | undefined;
21    })[];

Default: HtmlMinimizerPlugin.htmlMinifierTerser

Allows you to override default minify function. By default, plugin uses html-minifier-terser package.

We currently support:

HtmlMinimizerPlugin.swcMinify (used to compress HTML documents, i.e. with HTML doctype and <html>/<body>/<head> tags)
HtmlMinimizerPlugin.swcMinifyFragment (used to compress HTML fragments, i.e. when you have part of HTML which will be inserted into another HTML parts)
HtmlMinimizerPlugin.htmlMinifierTerser
HtmlMinimizerPlugin.minifyHtmlNode

[!NOTE]

The difference between swcMinify and swcMinifyFragment is the error reporting. You will get errors (invalid or broken syntax) if you have them in your HTML document or fragment. Which allows you to see all the errors and problems at the build stage.

Useful for using and testing unpublished versions or forks.

[!WARNING]

Always use require inside minify function when parallel option enabled.

`function`

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        minimizerOptions: {
7          collapseWhitespace: true,
8        },
9        minify: (data, minimizerOptions) => {
10          const htmlMinifier = require("html-minifier-terser");
11          const [[filename, input]] = Object.entries(data);
12
13          return {
14            code: htmlMinifier.minify(input, minimizerOptions),
15            warnings: [],
16            errors: [],
17          };
18        },
19      }),
20    ],
21  },
22};

`array`

If an array of functions is passed to the minify option, the minimizerOptions can be an array or an object. If minimizerOptions is array, the function index in the minify array corresponds to the options object with the same index in the minimizerOptions array. If you use minimizerOptions like object, all minify function accept it.

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        minimizerOptions: [
7          // Options for the first function (HtmlMinimizerPlugin.htmlMinifierTerser)
8          {
9            collapseWhitespace: true,
10          },
11          // Options for the second function
12          {},
13        ],
14        minify: [
15          HtmlMinimizerPlugin.htmlMinifierTerser,
16          (data, minimizerOptions) => {
17            const [[filename, input]] = Object.entries(data);
18            // To do something
19            return {
20              code: `optimised code`,
21              warnings: [],
22              errors: [],
23            };
24          },
25        ],
26      }),
27    ],
28  },
29};

`minimizerOptions`

Type:

1type minimizerOptions =
2  | {
3      [key: string]: any;
4    }
5  | Array<{
6      [key: string]: any;
7    }>;

Default: { caseSensitive: true, collapseWhitespace: true, conservativeCollapse: true, keepClosingSlash: true, minifyCSS: true, minifyJS: true, removeComments: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, }

Html-minifier-terser optimizations options.

`object`

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        minimizerOptions: {
7          collapseWhitespace: false,
8        },
9      }),
10    ],
11  },
12};

`array`

The function index in the minify array corresponds to the options object with the same index in the minimizerOptions array. If you use minimizerOptions like object, all minify function accept it.

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        minimizerOptions: [
7          // Options for the first function (HtmlMinimizerPlugin.htmlMinifierTerser)
8          {
9            collapseWhitespace: true,
10          },
11          // Options for the second function
12          {},
13        ],
14        minify: [
15          HtmlMinimizerPlugin.htmlMinifierTerser,
16          (data, minimizerOptions) => {
17            const [[filename, input]] = Object.entries(data);
18            // To do something
19            return {
20              code: `optimised code`,
21              warnings: [],
22              errors: [],
23            };
24          },
25        ],
26      }),
27    ],
28  },
29};

Examples

`swc/html`

Available options.

HTML Documents:

1const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
2const CopyPlugin = require("copy-webpack-plugin");
3
4module.exports = {
5  module: {
6    rules: [
7      {
8        test: /\.html$/i,
9        type: "asset/resource",
10      },
11    ],
12  },
13  plugins: [
14    new CopyPlugin({
15      patterns: [
16        {
17          context: path.resolve(__dirname, "dist"),
18          from: "./src/*.html",
19        },
20      ],
21    }),
22  ],
23  optimization: {
24    minimize: true,
25    minimizer: [
26      new HtmlMinimizerPlugin({
27        minify: HtmlMinimizerPlugin.swcMinify,
28        minimizerOptions: {
29          // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L5
30        },
31      }),
32    ],
33  },
34};

HTML Fragments:

1const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
2const CopyPlugin = require("copy-webpack-plugin");
3
4module.exports = {
5  module: {
6    rules: [
7      {
8        test: /\.html$/i,
9        type: "asset/resource",
10      },
11    ],
12  },
13  plugins: [
14    new CopyPlugin({
15      patterns: [
16        {
17          context: path.resolve(__dirname, "dist"),
18          from: "./src/*.html",
19        },
20      ],
21    }),
22  ],
23  optimization: {
24    minimize: true,
25    minimizer: [
26      new HtmlMinimizerPlugin({
27        test: /\.template\.html$/i,
28        minify: HtmlMinimizerPlugin.swcMinifyFragment,
29        minimizerOptions: {
30          // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L38
31        },
32      }),
33    ],
34  },
35};

`@minify-html/node`

Available options.

HTML Documents:

1const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
2const CopyPlugin = require("copy-webpack-plugin");
3
4module.exports = {
5  module: {
6    rules: [
7      {
8        test: /\.html$/i,
9        type: "asset/resource",
10      },
11    ],
12  },
13  plugins: [
14    new CopyPlugin({
15      patterns: [
16        {
17          context: path.resolve(__dirname, "dist"),
18          from: "./src/*.html",
19        },
20      ],
21    }),
22  ],
23  optimization: {
24    minimize: true,
25    minimizer: [
26      new HtmlMinimizerPlugin({
27        minify: HtmlMinimizerPlugin.minifyHtmlNode,
28        minimizerOptions: {
29          // Options - https://github.com/wilsonzlin/minify-html#minification
30        },
31      }),
32    ],
33  },
34};

You can use multiple HtmlMinimizerPlugin plugins to compress different files with the different minify function.

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

License

Determines if the project has defined a license.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

5

Maintained

Determines if the project is "actively maintained".

2

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 2

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/dependency-review.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/dependency-review.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/nodejs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/nodejs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:84: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/nodejs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:87: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/nodejs.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/nodejs.yml:103: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/nodejs.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/nodejs.yml:94
Warn: npmCommand not pinned by hash: .github/workflows/nodejs.yml:98
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 1 out of 3 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

6.1

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to html-minimizer-webpack-plugin

Other packages similar to html-minimizer-webpack-plugin

html-minimizer-webpack-plugin

Installations

Developer Guide

Yes

CommonJS

>= 18.12.0

22.13.1

10.9.2

Pull Requests

0

154

7

147

Issues

0

1

1

Releases

Languages

Developer

webpack-contrib

Download Statistics

GitHub Statistics

Sponsor this package

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

html-minimizer-webpack-plugin

Getting Started

Options

test

include

exclude

parallel

boolean

number

minify

function

array

minimizerOptions

object

array

Examples

swc/html

@minify-html/node

Contributing

License

10

10

10

10

10

6

5

2

0

0

0

0

6.1

/10

`test`

`include`

`exclude`

`parallel`

`boolean`

`number`

`minify`

`function`

`array`

`minimizerOptions`

`object`

`array`

`swc/html`

`@minify-html/node`