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 |
|
17 | This plugin uses [html-minifier-terser](https://github.com/terser/html-minifier-terser) to optimize and minify your HTML.
|
18 |
|
19 | ## Getting Started
|
20 |
|
21 | To begin, you'll need to install `html-minimizer-webpack-plugin`:
|
22 |
|
23 | ```console
|
24 | npm install html-minimizer-webpack-plugin --save-dev
|
25 | ```
|
26 |
|
27 | or
|
28 |
|
29 | ```console
|
30 | yarn add -D html-minimizer-webpack-plugin
|
31 | ```
|
32 |
|
33 | or
|
34 |
|
35 | ```console
|
36 | pnpm add -D html-minimizer-webpack-plugin
|
37 | ```
|
38 |
|
39 | Then add the plugin to your `webpack` configuration. For example:
|
40 |
|
41 | **webpack.config.js**
|
42 |
|
43 | ```js
|
44 | const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
|
45 | const CopyPlugin = require("copy-webpack-plugin");
|
46 |
|
47 | module.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 |
|
77 | This will enable HTML optimization only in production mode.
|
78 | If you want to run it also in development set the `optimization.minimize` option to `true`.
|
79 |
|
80 | And 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 |
|
93 | Type:
|
94 |
|
95 | ```ts
|
96 | type test = string | RegExp | Array<string | RegExp>;
|
97 | ```
|
98 |
|
99 | Default: `/\.html(\?.*)?$/i`
|
100 |
|
101 | Test to match files against.
|
102 |
|
103 | ```js
|
104 | module.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 |
|
118 | Type:
|
119 |
|
120 | ```ts
|
121 | type include = string | RegExp | Array<string | RegExp>;
|
122 | ```
|
123 |
|
124 | Default: `undefined`
|
125 |
|
126 | Files to include.
|
127 |
|
128 | **webpack.config.js**
|
129 |
|
130 | ```js
|
131 | module.exports = {
|
132 | optimization: {
|
133 | minimize: true,
|
134 | minimizer: [
|
135 | new HtmlMinimizerPlugin({
|
136 | include: /\/includes/,
|
137 | }),
|
138 | ],
|
139 | },
|
140 | };
|
141 | ```
|
142 |
|
143 | ### `exclude`
|
144 |
|
145 | Type:
|
146 |
|
147 | ```ts
|
148 | type exclude = string | RegExp | Array<string | RegExp>;
|
149 | ```
|
150 |
|
151 | Default: `undefined`
|
152 |
|
153 | Files to exclude.
|
154 |
|
155 | **webpack.config.js**
|
156 |
|
157 | ```js
|
158 | module.exports = {
|
159 | optimization: {
|
160 | minimize: true,
|
161 | minimizer: [
|
162 | new HtmlMinimizerPlugin({
|
163 | exclude: /\/excludes/,
|
164 | }),
|
165 | ],
|
166 | },
|
167 | };
|
168 | ```
|
169 |
|
170 | ### `parallel`
|
171 |
|
172 | Type:
|
173 |
|
174 | ```ts
|
175 | type parallel = undefined | boolean | number;
|
176 | ```
|
177 |
|
178 | Default: `true`
|
179 |
|
180 | Use multi-process parallel running to improve the build speed.
|
181 | Default 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 |
|
187 | Enable/disable multi-process parallel running.
|
188 |
|
189 | **webpack.config.js**
|
190 |
|
191 | ```js
|
192 | module.exports = {
|
193 | optimization: {
|
194 | minimize: true,
|
195 | minimizer: [
|
196 | new HtmlMinimizerPlugin({
|
197 | parallel: true,
|
198 | }),
|
199 | ],
|
200 | },
|
201 | };
|
202 | ```
|
203 |
|
204 | #### `number`
|
205 |
|
206 | Enable multi-process parallel running and set number of concurrent runs.
|
207 |
|
208 | **webpack.config.js**
|
209 |
|
210 | ```js
|
211 | module.exports = {
|
212 | optimization: {
|
213 | minimize: true,
|
214 | minimizer: [
|
215 | new HtmlMinimizerPlugin({
|
216 | parallel: 4,
|
217 | }),
|
218 | ],
|
219 | },
|
220 | };
|
221 | ```
|
222 |
|
223 | ### `minify`
|
224 |
|
225 | Type:
|
226 |
|
227 | ```ts
|
228 | type 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 |
|
251 | Default: `HtmlMinimizerPlugin.htmlMinifierTerser`
|
252 |
|
253 | Allows you to override default minify function.
|
254 | By default, plugin uses [html-minifier-terser](https://github.com/terser/html-minifier-terser) package.
|
255 | Useful 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
|
264 | module.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 |
|
290 | If an array of functions is passed to the `minify` option, the `minimizerOptions` can be an array or an object.
|
291 | If `minimizerOptions` is array, the function index in the `minify` array corresponds to the options object with the same index in the `minimizerOptions` array.
|
292 | If you use `minimizerOptions` like object, all `minify` function accept it.
|
293 |
|
294 | **webpack.config.js**
|
295 |
|
296 | ```js
|
297 | module.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 |
|
330 | Type:
|
331 |
|
332 | ```ts
|
333 | type minimizerOptions =
|
334 | | {
|
335 | [key: string]: any;
|
336 | }
|
337 | | Array<{
|
338 | [key: string]: any;
|
339 | }>;
|
340 | ```
|
341 |
|
342 | Default: `{ 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
|
349 | module.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 |
|
365 | The function index in the `minify` array corresponds to the options object with the same index in the `minimizerOptions` array.
|
366 | If you use `minimizerOptions` like object, all `minify` function accept it.
|
367 |
|
368 | **webpack.config.js**
|
369 |
|
370 | ```js
|
371 | module.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 |
|
404 | Please 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
|