{"id":14976390,"url":"https://github.com/ashutoshsce/minify-html-webpack-plugin","last_synced_at":"2025-10-27T20:31:04.027Z","repository":{"id":57297808,"uuid":"217535828","full_name":"ashutoshSce/minify-html-webpack-plugin","owner":"ashutoshSce","description":"A webpack plugin to minify html file(s) after building","archived":false,"fork":false,"pushed_at":"2022-07-19T21:18:02.000Z","size":12,"stargazers_count":10,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-01T08:02:10.941Z","etag":null,"topics":["build","build-tool","file","html","html-minifier","laravel","laravel-mix-plugin","minification","minifier","minify","mix","php","replace","replace-text","replacer","search","search-in-text","webpack-plugin","webpack3","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ashutoshSce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-25T13:08:20.000Z","updated_at":"2022-11-20T15:13:38.000Z","dependencies_parsed_at":"2022-09-02T05:42:12.335Z","dependency_job_id":null,"html_url":"https://github.com/ashutoshSce/minify-html-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashutoshSce%2Fminify-html-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashutoshSce%2Fminify-html-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashutoshSce%2Fminify-html-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashutoshSce%2Fminify-html-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ashutoshSce","download_url":"https://codeload.github.com/ashutoshSce/minify-html-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238552989,"owners_count":19491352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["build","build-tool","file","html","html-minifier","laravel","laravel-mix-plugin","minification","minifier","minify","mix","php","replace","replace-text","replacer","search","search-in-text","webpack-plugin","webpack3","webpack4"],"created_at":"2024-09-24T13:53:49.070Z","updated_at":"2025-10-27T20:30:58.754Z","avatar_url":"https://github.com/ashutoshSce.png","language":"JavaScript","readme":"## Webpack plugin: minify-html-webpack-plugin\n\n[![npm](https://img.shields.io/npm/v/minify-html-webpack-plugin)](https://www.npmjs.com/package/minify-html-webpack-plugin)\n[![node-current](https://img.shields.io/node/v/minify-html-webpack-plugin)](https://nodejs.org)\n[![npm](https://img.shields.io/npm/dm/minify-html-webpack-plugin)](https://npmcharts.com/compare/minify-html-webpack-plugin?minimal=true)\n[![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/ashutoshSce/minify-html-webpack-plugin)](https://github.com/kangax/html-minifier)\n[![NPM](https://img.shields.io/npm/l/minify-html-webpack-plugin)](https://www.npmjs.com/package/minify-html-webpack-plugin)\n\nThis is a [webpack](http://webpack.github.io/) plugin that can minimize the HTML with [HTMLMinifier](https://www.npmjs.com/package/html-minifier) for all source directory files and copy into destinations directory recursively iterating through all subfolders and files during the Webpack build.\n\nInstallation\n============\nInstall the plugin with npm:\n```shell\n$ npm install minify-html-webpack-plugin --save-dev\n```\n\nHeads up!\n===========\n_**Please do not report issues related to HTML parsing and output on this repository. Report those issues to the [html-minifier](https://github.com/kangax/html-minifier/issues) issue tracker.**_\n\nBasic Usage\n===========\nAdd the plugin to your webpack and config as follows:\n\n```javascript\n    const MinifyHtmlWebpackPlugin = require('minify-html-webpack-plugin');\n    const webpackConfig = {\n        plugins: [\n            new MinifyHtmlWebpackPlugin({\n                src: './storage/framework/views',\n                dest: './storage/framework/views',\n                rules: {\n                    collapseBooleanAttributes: true,\n                    collapseWhitespace: true,\n                    removeAttributeQuotes: true,\n                    removeComments: true,\n                    minifyJS: true,\n                }\n            });\n        ]\n    };\n```\n\nOptional Add Search And Replace Rules\n=================\nIf need to replace strings and then do minification across all source files in directoris and sub-directories.\n\n```javascript\n    const MinifyHtmlWebpackPlugin = require('minify-html-webpack-plugin');\n    const webpackConfig = {\n        plugins: [\n            new MinifyHtmlWebpackPlugin({\n                src: './storage/framework/views',\n                dest: './storage/framework/views',\n                rules: {\n                    collapseBooleanAttributes: true,\n                    collapseWhitespace: true,\n                    removeAttributeQuotes: true,\n                    removeComments: true,\n                    minifyJS: true,\n                },\n                searchAndReplace: [\n                    {\n                        /* The string, or regular expression, that will be replaced by the new value */\n                        search: 'search_string',\n                        /* The string to replace the search value with */\n                        replace: 'replace_string' \n                    }\n                ]\n            });\n        ]\n    };\n```\n\nIf need to replace array of string with common replace funtions and then minify it across source files and sub-directories.\n\n```javascript\n    const MinifyHtmlWebpackPlugin = require('minify-html-webpack-plugin');\n    const webpackConfig = {\n        plugins: [\n            new MinifyHtmlWebpackPlugin({\n                afterBuild: true,\n                src: './storage/framework/views',\n                dest: './storage/framework/views',\n                rules: {\n                    collapseBooleanAttributes: true,\n                    collapseWhitespace: true,\n                    removeAttributeQuotes: true,\n                    removeComments: true,\n                    minifyJS: true,\n                },\n                searchAndReplace: [\n                   {\n                        search: './domain',\n                        replace: 'https://original.domain.com'\n                    },\n                    {\n                        /* The array of string value, or regular expression, that will be replaced by the new value returened from replace function */\n                        search: ['./css/app.css', './js/app.js'],\n                        replace: (searchString, index) =\u003e {\n                            /* The custom replace logic to replace the search value with */\n\n                            /* Example: Logic to to replace css, js file names with full domain name as prefix and version as suffix to it.\n\n                                    './css/app.css' =\u003e 'https://original.domain.com/css/app.css?id=91352d1f26a97b89f271'\n                                    './js/app.js' =\u003e 'https://original.domain.com/js/app.js?id=a1f1ae0cfce9bc2d3ce6'\n\n                            */\n                            const content = fs.readFileSync(path.resolve('/real/path/of/file', searchString), 'utf8');\n                            return 'https://original.domain.com' + searchString.substring(1) + '?id=' + md5(content).substr(0, 20);\n                        }\n                    },\n                ]\n            });\n        ]\n    };\n```\n\n\nLaravel Mix Users\n=================\nPaste below snippets into webpack.mix.js file.\n\n```javascript\n    const MinifyHtmlWebpackPlugin = require('minify-html-webpack-plugin');\n    const mix = require('laravel-mix');\n\n    mix.webpackConfig({\n        plugins: [\n            new MinifyHtmlWebpackPlugin({\n                afterBuild: true,\n                src: './storage/framework/views',\n                dest: './storage/framework/views',\n                ignoreFileNameRegex: /\\.(gitignore|php)$/,\n                ignoreFileContentsRegex: /(\u003c\\?xml version)|(mail::message)/,\n                rules: {\n                    collapseBooleanAttributes: true,\n                    collapseWhitespace: true,\n                    removeAttributeQuotes: true,\n                    removeComments: true,\n                    minifyJS: true,\n                }\n            })\n        ]\n    });\n```\n\nConfiguration\n=============\n\nYou can pass configuration options to `MinifyHtmlWebpackPlugin`. Each configuration has following items:\n\n- `afterBuild`: Optional. Add `afterBuild:true`, if you want to run complete minification process after webpack build, at the end.\n- `dir`: Optional. Base dir to find the files, if not provided, use the root of webpack context.\n- `src`: Required. source directory path.\n- `dest`: Required. destination directory path. Paste minified HTML contents from `src` directory files into `dest` directory.\n- `ignoreFileNameRegex`: Optional. Regex Expression to ingnore files in the src directory if it matches with the file name, if not provided, will minimize all files in src directory.`\n- `ignoreFileContentsRegex`: Optional. Regex Expression to ingnore files in the src directory if it matches with the file contents, if not provided, will minimize all files in src directory.`\n- `rules`: Required. See the [html-minifer docs](https://github.com/kangax/html-minifier) for all available options.\n- `searchAndReplace`: Optional. Array of all search and replace rules. check above examples.\n\n# License\n\nThis project is licensed under [MIT](https://github.com/ashutoshSce/minify-html-webpack-plugin/blob/master/LICENSE).","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashutoshsce%2Fminify-html-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashutoshsce%2Fminify-html-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashutoshsce%2Fminify-html-webpack-plugin/lists"}