UNPKG

9.35 kBMarkdownView Raw
1<div align="center">
2 <a href="https://github.com/webpack/webpack">
3 <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
4 </a>
5</div>
6
7[![npm][npm]][npm-url]
8[![node][node]][node-url]
9[![deps][deps]][deps-url]
10[![tests][tests]][tests-url]
11[![cover][cover]][cover-url]
12[![chat][chat]][chat-url]
13[![size][size]][size-url]
14
15# html-minimizer-webpack-plugin
16
17This plugin uses [html-minifier-terser](https://github.com/terser/html-minifier-terser) to optimize and minify your HTML.
18
19## Getting Started
20
21To begin, you'll need to install `html-minimizer-webpack-plugin`:
22
23```console
24npm install html-minimizer-webpack-plugin --save-dev
25```
26
27or
28
29```console
30yarn add -D html-minimizer-webpack-plugin
31```
32
33or
34
35```console
36pnpm add -D html-minimizer-webpack-plugin
37```
38
39Then add the plugin to your `webpack` configuration. For example:
40
41**webpack.config.js**
42
43```js
44const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
45const CopyPlugin = require("copy-webpack-plugin");
46
47module.exports = {
48 module: {
49 rules: [
50 {
51 test: /\.html$/i,
52 type: "asset/resource",
53 },
54 ],
55 },
56 plugins: [
57 new CopyPlugin({
58 patterns: [
59 {
60 context: path.resolve(__dirname, "dist"),
61 from: "./src/*.html",
62 },
63 ],
64 }),
65 ],
66 optimization: {
67 minimize: true,
68 minimizer: [
69 // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
70 // `...`
71 new HtmlMinimizerPlugin(),
72 ],
73 },
74};
75```
76
77This will enable HTML optimization only in production mode.
78If you want to run it also in development set the `optimization.minimize` option to `true`.
79
80And run `webpack` via your preferred method.
81
82## Options
83
84- **[`test`](#test)**
85- **[`include`](#include)**
86- **[`exclude`](#exclude)**
87- **[`parallel`](#parallel)**
88- **[`minify`](#minify)**
89- **[`minimizerOptions`](#minimizerOptions)**
90
91### `test`
92
93Type:
94
95```ts
96type test = string | RegExp | Array<string | RegExp>;
97```
98
99Default: `/\.html(\?.*)?$/i`
100
101Test to match files against.
102
103```js
104module.exports = {
105 optimization: {
106 minimize: true,
107 minimizer: [
108 new HtmlMinimizerPlugin({
109 test: /\.foo\.html/i,
110 }),
111 ],
112 },
113};
114```
115
116### `include`
117
118Type:
119
120```ts
121type include = string | RegExp | Array<string | RegExp>;
122```
123
124Default: `undefined`
125
126Files to include.
127
128**webpack.config.js**
129
130```js
131module.exports = {
132 optimization: {
133 minimize: true,
134 minimizer: [
135 new HtmlMinimizerPlugin({
136 include: /\/includes/,
137 }),
138 ],
139 },
140};
141```
142
143### `exclude`
144
145Type:
146
147```ts
148type exclude = string | RegExp | Array<string | RegExp>;
149```
150
151Default: `undefined`
152
153Files to exclude.
154
155**webpack.config.js**
156
157```js
158module.exports = {
159 optimization: {
160 minimize: true,
161 minimizer: [
162 new HtmlMinimizerPlugin({
163 exclude: /\/excludes/,
164 }),
165 ],
166 },
167};
168```
169
170### `parallel`
171
172Type:
173
174```ts
175type parallel = undefined | boolean | number;
176```
177
178Default: `true`
179
180Use multi-process parallel running to improve the build speed.
181Default number of concurrent runs: `os.cpus().length - 1`.
182
183> ℹ️ Parallelization can speed up your build significantly and is therefore **highly recommended**.
184
185#### `boolean`
186
187Enable/disable multi-process parallel running.
188
189**webpack.config.js**
190
191```js
192module.exports = {
193 optimization: {
194 minimize: true,
195 minimizer: [
196 new HtmlMinimizerPlugin({
197 parallel: true,
198 }),
199 ],
200 },
201};
202```
203
204#### `number`
205
206Enable multi-process parallel running and set number of concurrent runs.
207
208**webpack.config.js**
209
210```js
211module.exports = {
212 optimization: {
213 minimize: true,
214 minimizer: [
215 new HtmlMinimizerPlugin({
216 parallel: 4,
217 }),
218 ],
219 },
220};
221```
222
223### `minify`
224
225Type:
226
227```ts
228type minify =
229 | ((
230 data: { [file: string]: string },
231 minimizerOptions: {
232 [key: string]: any;
233 }
234 ) => {
235 code: string;
236 errors?: unknown[] | undefined;
237 warnings?: unknown[] | undefined;
238 })
239 | ((
240 data: { [file: string]: string },
241 minimizerOptions: {
242 [key: string]: any;
243 }
244 ) => {
245 code: string;
246 errors?: unknown[] | undefined;
247 warnings?: unknown[] | undefined;
248 })[];
249```
250
251Default: `HtmlMinimizerPlugin.htmlMinifierTerser`
252
253Allows you to override default minify function.
254By default, plugin uses [html-minifier-terser](https://github.com/terser/html-minifier-terser) package.
255Useful for using and testing unpublished versions or forks.
256
257> ⚠️ **Always use `require` inside `minify` function when `parallel` option enabled**.
258
259#### `function`
260
261**webpack.config.js**
262
263```js
264module.exports = {
265 optimization: {
266 minimize: true,
267 minimizer: [
268 new HtmlMinimizerPlugin({
269 minimizerOptions: {
270 collapseWhitespace: true,
271 },
272 minify: (data, minimizerOptions) => {
273 const htmlMinifier = require("html-minifier-terser");
274 const [[filename, input]] = Object.entries(data);
275
276 return {
277 code: htmlMinifier.minify(input, minimizerOptions),
278 warnings: [],
279 errors: [],
280 };
281 },
282 }),
283 ],
284 },
285};
286```
287
288#### `array`
289
290If an array of functions is passed to the `minify` option, the `minimizerOptions` can be an array or an object.
291If `minimizerOptions` is array, the function index in the `minify` array corresponds to the options object with the same index in the `minimizerOptions` array.
292If you use `minimizerOptions` like object, all `minify` function accept it.
293
294**webpack.config.js**
295
296```js
297module.exports = {
298 optimization: {
299 minimize: true,
300 minimizer: [
301 new HtmlMinimizerPlugin({
302 minimizerOptions: [
303 // Options for the first function (HtmlMinimizerPlugin.htmlMinifierTerser)
304 {
305 collapseWhitespace: true,
306 },
307 // Options for the second function
308 {},
309 ],
310 minify: [
311 HtmlMinimizerPlugin.htmlMinifierTerser,
312 (data, minimizerOptions) => {
313 const [[filename, input]] = Object.entries(data);
314 // To do something
315 return {
316 code: `optimised code`,
317 warnings: [],
318 errors: [],
319 };
320 },
321 ],
322 }),
323 ],
324 },
325};
326```
327
328### `minimizerOptions`
329
330Type:
331
332```ts
333type minimizerOptions =
334 | {
335 [key: string]: any;
336 }
337 | Array<{
338 [key: string]: any;
339 }>;
340```
341
342Default: `{ caseSensitive: true, collapseWhitespace: true, conservativeCollapse: true, keepClosingSlash: true, minifyCSS: true, minifyJS: true, removeComments: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, }`
343
344`Html-minifier-terser` optimizations [options](https://github.com/terser/html-minifier-terser#options-quick-reference).
345
346#### `object`
347
348```js
349module.exports = {
350 optimization: {
351 minimize: true,
352 minimizer: [
353 new HtmlMinimizerPlugin({
354 minimizerOptions: {
355 collapseWhitespace: false,
356 },
357 }),
358 ],
359 },
360};
361```
362
363#### `array`
364
365The function index in the `minify` array corresponds to the options object with the same index in the `minimizerOptions` array.
366If you use `minimizerOptions` like object, all `minify` function accept it.
367
368**webpack.config.js**
369
370```js
371module.exports = {
372 optimization: {
373 minimize: true,
374 minimizer: [
375 new HtmlMinimizerPlugin({
376 minimizerOptions: [
377 // Options for the first function (HtmlMinimizerPlugin.htmlMinifierTerser)
378 {
379 collapseWhitespace: true,
380 },
381 // Options for the second function
382 {},
383 ],
384 minify: [
385 HtmlMinimizerPlugin.htmlMinifierTerser,
386 (data, minimizerOptions) => {
387 const [[filename, input]] = Object.entries(data);
388 // To do something
389 return {
390 code: `optimised code`,
391 warnings: [],
392 errors: [],
393 };
394 },
395 ],
396 }),
397 ],
398 },
399};
400```
401
402## Contributing
403
404Please take a moment to read our contributing guidelines if you haven't yet done so.
405
406[CONTRIBUTING](./.github/CONTRIBUTING.md)
407
408## License
409
410[MIT](./LICENSE)
411
412[npm]: https://img.shields.io/npm/v/html-minimizer-webpack-plugin.svg
413[npm-url]: https://npmjs.com/package/html-minimizer-webpack-plugin
414[node]: https://img.shields.io/node/v/html-minimizer-webpack-plugin.svg
415[node-url]: https://nodejs.org
416[deps]: https://david-dm.org/webpack-contrib/html-minimizer-webpack-plugin.svg
417[deps-url]: https://david-dm.org/webpack-contrib/html-minimizer-webpack-plugin
418[tests]: https://github.com/webpack-contrib/html-minimizer-webpack-plugin/workflows/html-minimizer-webpack-plugin/badge.svg
419[tests-url]: https://github.com/webpack-contrib/html-minimizer-webpack-plugin/actions
420[cover]: https://codecov.io/gh/webpack-contrib/html-minimizer-webpack-plugin/branch/master/graph/badge.svg
421[cover-url]: https://codecov.io/gh/webpack-contrib/html-minimizer-webpack-plugin
422[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
423[chat-url]: https://gitter.im/webpack/webpack
424[size]: https://packagephobia.now.sh/badge?p=html-minimizer-webpack-plugin
425[size-url]: https://packagephobia.now.sh/result?p=html-minimizer-webpack-plugin