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 | Then add the plugin to your `webpack` configuration. For example:
|
28 |
|
29 | **webpack.config.js**
|
30 |
|
31 | ```js
|
32 | const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
|
33 | const CopyPlugin = require("copy-webpack-plugin");
|
34 |
|
35 | module.exports = {
|
36 | module: {
|
37 | loaders: [
|
38 | {
|
39 | test: /\.html$/i,
|
40 | use: [
|
41 | {
|
42 | loader: "file-loader",
|
43 | options: {
|
44 | name: "[name].[ext]",
|
45 | },
|
46 | },
|
47 | ],
|
48 | },
|
49 | ],
|
50 | },
|
51 | plugins: [
|
52 | new CopyPlugin({
|
53 | patterns: [
|
54 | {
|
55 | context: path.resolve(__dirname, "dist"),
|
56 | from: "./src/*.html",
|
57 | },
|
58 | ],
|
59 | }),
|
60 | ],
|
61 | optimization: {
|
62 | minimize: true,
|
63 | minimizer: [
|
64 | // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
|
65 | // `...`
|
66 | new HtmlMinimizerPlugin(),
|
67 | ],
|
68 | },
|
69 | };
|
70 | ```
|
71 |
|
72 | This will enable HTML optimization only in production mode.
|
73 | If you want to run it also in development set the `optimization.minimize` option to `true`.
|
74 |
|
75 | And run `webpack` via your preferred method.
|
76 |
|
77 | ## Options
|
78 |
|
79 | ### `test`
|
80 |
|
81 | Type: `String|RegExp|Array<String|RegExp>` - default: `/\.html(\?.*)?$/i`
|
82 |
|
83 | Test to match files against.
|
84 |
|
85 | ```js
|
86 | module.exports = {
|
87 | optimization: {
|
88 | minimize: true,
|
89 | minimizer: [
|
90 | new HtmlMinimizerPlugin({
|
91 | test: /\.foo\.html/i,
|
92 | }),
|
93 | ],
|
94 | },
|
95 | };
|
96 | ```
|
97 |
|
98 | ### `include`
|
99 |
|
100 | Type: `String|RegExp|Array<String|RegExp>`
|
101 | Default: `undefined`
|
102 |
|
103 | Files to include.
|
104 |
|
105 | **webpack.config.js**
|
106 |
|
107 | ```js
|
108 | module.exports = {
|
109 | optimization: {
|
110 | minimize: true,
|
111 | minimizer: [
|
112 | new HtmlMinimizerPlugin({
|
113 | include: /\/includes/,
|
114 | }),
|
115 | ],
|
116 | },
|
117 | };
|
118 | ```
|
119 |
|
120 | ### `exclude`
|
121 |
|
122 | Type: `String|RegExp|Array<String|RegExp>`
|
123 | Default: `undefined`
|
124 |
|
125 | Files to exclude.
|
126 |
|
127 | **webpack.config.js**
|
128 |
|
129 | ```js
|
130 | module.exports = {
|
131 | optimization: {
|
132 | minimize: true,
|
133 | minimizer: [
|
134 | new HtmlMinimizerPlugin({
|
135 | exclude: /\/excludes/,
|
136 | }),
|
137 | ],
|
138 | },
|
139 | };
|
140 | ```
|
141 |
|
142 | ### `parallel`
|
143 |
|
144 | Type: `Boolean|Number`
|
145 | Default: `true`
|
146 |
|
147 | Use multi-process parallel running to improve the build speed.
|
148 | Default number of concurrent runs: `os.cpus().length - 1`.
|
149 |
|
150 | > ℹ️ Parallelization can speedup your build significantly and is therefore **highly recommended**.
|
151 |
|
152 | #### `Boolean`
|
153 |
|
154 | Enable/disable multi-process parallel running.
|
155 |
|
156 | **webpack.config.js**
|
157 |
|
158 | ```js
|
159 | module.exports = {
|
160 | optimization: {
|
161 | minimize: true,
|
162 | minimizer: [
|
163 | new HtmlMinimizerPlugin({
|
164 | parallel: true,
|
165 | }),
|
166 | ],
|
167 | },
|
168 | };
|
169 | ```
|
170 |
|
171 | #### `Number`
|
172 |
|
173 | Enable multi-process parallel running and set number of concurrent runs.
|
174 |
|
175 | **webpack.config.js**
|
176 |
|
177 | ```js
|
178 | module.exports = {
|
179 | optimization: {
|
180 | minimize: true,
|
181 | minimizer: [
|
182 | new HtmlMinimizerPlugin({
|
183 | parallel: 4,
|
184 | }),
|
185 | ],
|
186 | },
|
187 | };
|
188 | ```
|
189 |
|
190 | ### `minify`
|
191 |
|
192 | Type: `Function`
|
193 | Default: `undefined`
|
194 |
|
195 | Allows you to override default minify function.
|
196 | By default plugin uses [html-minifier-terser](https://github.com/terser/html-minifier-terser) package.
|
197 | Useful for using and testing unpublished versions or forks.
|
198 |
|
199 | > ⚠️ **Always use `require` inside `minify` function when `parallel` option enabled**.
|
200 |
|
201 | **webpack.config.js**
|
202 |
|
203 | ```js
|
204 | module.exports = {
|
205 | optimization: {
|
206 | minimize: true,
|
207 | minimizer: [
|
208 | new HtmlMinimizerPlugin({
|
209 | minimizerOptions: {
|
210 | collapseWhitespace: true,
|
211 | },
|
212 | minify: (data, minimizerOptions) => {
|
213 | const htmlMinifier = require("html-minifier-terser");
|
214 | const [[filename, input]] = Object.entries(data);
|
215 |
|
216 | return htmlMinifier.minify(input, minimizerOptions);
|
217 | },
|
218 | }),
|
219 | ],
|
220 | },
|
221 | };
|
222 | ```
|
223 |
|
224 | ### `minimizerOptions`
|
225 |
|
226 | Type: `Object`
|
227 | Default: `{ caseSensitive: true, collapseWhitespace: true, conservativeCollapse: true, keepClosingSlash: true, minifyCSS: true, minifyJS: true, removeComments: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, }`
|
228 |
|
229 | `Html-minifier-terser` optimisations [options](https://github.com/terser/html-minifier-terser#options-quick-reference).
|
230 |
|
231 | ```js
|
232 | module.exports = {
|
233 | optimization: {
|
234 | minimize: true,
|
235 | minimizer: [
|
236 | new HtmlMinimizerPlugin({
|
237 | minimizerOptions: {
|
238 | collapseWhitespace: false,
|
239 | },
|
240 | }),
|
241 | ],
|
242 | },
|
243 | };
|
244 | ```
|
245 |
|
246 | ## Contributing
|
247 |
|
248 | Please take a moment to read our contributing guidelines if you haven't yet done so.
|
249 |
|
250 | [CONTRIBUTING](./.github/CONTRIBUTING.md)
|
251 |
|
252 | ## License
|
253 |
|
254 | [MIT](./LICENSE)
|
255 |
|
256 | [npm]: https://img.shields.io/npm/v/html-minimizer-webpack-plugin.svg
|
257 | [npm-url]: https://npmjs.com/package/html-minimizer-webpack-plugin
|
258 | [node]: https://img.shields.io/node/v/html-minimizer-webpack-plugin.svg
|
259 | [node-url]: https://nodejs.org
|
260 | [deps]: https://david-dm.org/webpack-contrib/html-minimizer-webpack-plugin.svg
|
261 | [deps-url]: https://david-dm.org/webpack-contrib/html-minimizer-webpack-plugin
|
262 | [tests]: https://github.com/webpack-contrib/html-minimizer-webpack-plugin/workflows/html-minimizer-webpack-plugin/badge.svg
|
263 | [tests-url]: https://github.com/webpack-contrib/html-minimizer-webpack-plugin/actions
|
264 | [cover]: https://codecov.io/gh/webpack-contrib/html-minimizer-webpack-plugin/branch/master/graph/badge.svg
|
265 | [cover-url]: https://codecov.io/gh/webpack-contrib/html-minimizer-webpack-plugin
|
266 | [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
|
267 | [chat-url]: https://gitter.im/webpack/webpack
|
268 | [size]: https://packagephobia.now.sh/badge?p=html-minimizer-webpack-plugin
|
269 | [size-url]: https://packagephobia.now.sh/result?p=html-minimizer-webpack-plugin
|