{"id":16296155,"url":"https://github.com/scinos/webpack-plugin-hash-output","last_synced_at":"2025-04-05T21:06:10.622Z","repository":{"id":40003096,"uuid":"88319181","full_name":"scinos/webpack-plugin-hash-output","owner":"scinos","description":"Plugin to replace webpack chunkhash with an md5 hash of the final file conent.","archived":false,"fork":false,"pushed_at":"2022-12-03T15:42:57.000Z","size":948,"stargazers_count":128,"open_issues_count":20,"forks_count":29,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-27T02:02:14.730Z","etag":null,"topics":["hash","md5","plugin","webpack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/webpack-plugin-hash-output","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scinos.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-15T02:51:41.000Z","updated_at":"2024-08-12T19:29:06.000Z","dependencies_parsed_at":"2023-01-22T19:45:50.088Z","dependency_job_id":null,"html_url":"https://github.com/scinos/webpack-plugin-hash-output","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scinos%2Fwebpack-plugin-hash-output","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scinos%2Fwebpack-plugin-hash-output/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scinos%2Fwebpack-plugin-hash-output/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scinos%2Fwebpack-plugin-hash-output/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scinos","download_url":"https://codeload.github.com/scinos/webpack-plugin-hash-output/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246922245,"owners_count":20855345,"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":["hash","md5","plugin","webpack"],"created_at":"2024-10-10T20:21:27.026Z","updated_at":"2025-04-05T21:06:10.585Z","avatar_url":"https://github.com/scinos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-plugin-hash-output\n\n[![Build Status](https://travis-ci.org/scinos/webpack-plugin-hash-output.svg?branch=master)](https://travis-ci.org/scinos/webpack-plugin-hash-output)\n\nPlugin to replace webpack chunkhash with an md5 hash of the final file conent.\n\n## Installation\n\nWith npm\n```\nnpm install webpack-plugin-hash-output --save-dev\n```\n\nWith yarn\n```\nyarn add webpack-plugin-hash-output --dev\n```\n\n## Why?\n\nThere are other webpack plugins for hashing out there. But when they run, they don't \"see\" the final form of the code, because they run\n*before* plugins like `webpack.optimize.UglifyJsPlugin`. In other words, if you change `webpack.optimize.UglifyJsPlugin` config, your\nhashes won't change, creating potential conflicts with cached resources.\n\nThe main difference is that `webpack-plugin-hash-output` runs in the last compilation step. So any change in webpack or any other plugin\nthat actually changes the output, will be \"seen\" by this plugin, and therefore that change will be reflected in the hash.\n\nIt will generate files like `entry.\u003chash\u003e.js`, where `\u003chash\u003e` is always a hash of the content (well, a subset of). Example:\n\n```\n$ md5 entry.32f1718dd08eccda2791.js\n\nMD5 (entry.32f1718dd08eccda2791.js) = 32f1718dd08eccda2791ff7ed466bd98\n```\n\nAll other assets (common files, manifest files, HTML output...) will use the new md5 hash to reference the asset.\n\n## Compatibility\n\nRequires webpack \u003e=4\n\n## Usage\n\nJust add this plugin as usual.\n\n```javascript\n// webpack.config.js\nconst HashOutput = require('webpack-plugin-hash-output');\n\nmodule.exports = {\n    // ...\n    output: {\n        //...\n        filename: '[name].[chunkhash].js',\n    },\n    plugins: [\n        new HashOutput(options)\n    ]\n};\n```\n\n## Sourcemap support\n\nThis plugin partially supports sourcemaps. When a chunk hash is recomputed, it will update the name\nof the chunk in the chunks's sourcemap, but it won't recompute the name of the hash file. This has\nthe side effect that the name of the sourcemap will differ from the name of the chunk. Example:\n\nBefore:\n```javascript\n// app.\u003coldhash\u003e.js\n\n// ...code...\n//# sourceMappingURL=entry.\u003coldhash\u003e.js.map\n```\n\n```javascript\n// app.\u003coldhash\u003e.js.map\n\n// ...\n\"file\":\"app.\u003coldhash\u003e.js\"\n// ...\n```\n\nAfter:\n```javascript\n// app.\u003cnewhash\u003e.js\n\n// ...code...\n//# sourceMappingURL=entry.\u003coldhash\u003e.js.map\n```\n\n```javascript\n// app.\u003coldhash\u003e.js.map\n\n// ...\n\"file\":\"app.\u003cnewhash\u003e.js\"\n// ...\n```\n\nWe can't fully support sourcemaps (i.e. recomute sourcemap hash) because the circular reference: we\ncan't compute sourcemap hash without computing the file hash first, and we can't compute the file\nhash without the sourcemap hash.\n\n## Interaction with other plugins\n\nBecause this plugin modifies the name of the assets, it break other plugins that also operate on the name of the assets\nif the order of the plugins is not correct. For `plugin-webpack-hash-output` to work, it has to be the first plugin to\nrun in the `emit` phase. Inside the same phase, the order of the plugins is determined by the order in which they appear\nin webpack's config option `plugins`.\n\nA specific example of this is [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin): `plugin-webpack-hash-output`\nmust be listed _before_ `html-webpack-plugin`. Example:\n\n```javascript\nplugins: [\n    new HashOutput(...),\n    new HtmlWebpackPlugin(...),\n]\n```\n\nWhen the webpack compilation starts, this plugin will check if there are other plugins that might conflict with the output and\ndisplay a warning. It is recommended you fix the order of the plugins unless you really know what you are doing:\n\n```\n[WARNING] There are other plugins configured that might interfere with webpack-plugin-hash-output.\nFor this plugin to work correctly, it should be the first plugin in the \"emit\" phase. Please\nbe sure that the rest of the plugins run after webpack-plugin-hash-output (ensure they are listed\nafter webpack-plugin-hash-output in the 'plugins' option in your webpack config).\n\nPlugins that could interfere with webpack-plugin-hash-output:\n * HtmlWebpackPlugin\n```\n\n\n## Options\n\n\u003e Note: Use Webpack's own [hash output options](https://webpack.js.org/configuration/output/#output-hashfunction) to\n  configure hash function and length.\n\n### `options.validateOutput`\n\n`boolean`, defaults to `false`.\n\nAfter webpack has compiled and generated all the assets, checks that the hash of the content is included in the file. If it is not, it will throw an error\nand the webpack process will fail.\n\n\n### `options.validateOutputRegex`\n`regex`, defaults to `/^.*$/`\n\nWhen validating the output (see `options.validateOutput`), only evaluate hashes for files matching this regexp.\nUseful for skipping source maps or other output. Example:\n\n```javascript\nmodule.exports = {\n    entry: {\n        main: './src/app.js',\n    },\n    output: {\n        filename: 'assets/[name].[chunkhash].js',\n    },\n    plugins: [\n        new HashOutput({\n            validateOutput: true,\n            // Check that md5(assets/main.\u003chash\u003e.js) === \u003chash\u003e, but doesn't check fragments/app.html\n            validateOutputRegex: /^assets\\/.*\\.js$/,\n        }),\n        new HtmlWebpackPlugin({\n            filename: 'fragments/app.html',\n            chunks: ['main'],\n        }),\n    ]\n};\n```\n\n\n## Contributions\n\n### Running tests\n\nTests can be run by:\n\n```\nyarn test\n```\n\nAfter running the tests, you might want to run `yarn run clean` to clean up temp files generated by the tests.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscinos%2Fwebpack-plugin-hash-output","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscinos%2Fwebpack-plugin-hash-output","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscinos%2Fwebpack-plugin-hash-output/lists"}