webpack-plugin-hash-output

3.2.1 verified Sat Apr 25 auth: no javascript

A Webpack plugin that replaces chunkhash placeholders with an MD5 hash of the final file content, computed after all other plugins (like UglifyJsPlugin) have run. v3.2.1 requires Webpack >=4. Unlike other hash plugins that compute hashes earlier, this plugin ensures that any change in the build pipeline—including minification configuration—is reflected in the output hash, preventing cache conflicts. It supports sourcemaps partially and has known ordering requirements with plugins like HtmlWebpackPlugin. Maintained on GitHub, low release cadence (last release 2020).

Common errors

error Module not found: Can't resolve 'webpack-plugin-hash-output' ↓

cause Plugin not installed or not in node_modules.

fix

Run npm install webpack-plugin-hash-output --save-dev and ensure the path is correct in the webpack config.

error TypeError: HashOutput is not a constructor ↓

cause Using named import instead of default import, or incorrect require.

fix

Use const HashOutput = require('webpack-plugin-hash-output'); (no destructuring).

error ValidationError: Invalid options object. Hash Output Plugin has been initialized using an options object that does not match the API schema. ↓

cause Passing invalid options to the constructor (e.g., misspelled option).

fix

Check that options are valid: currently only optional 'validateOutput' (deprecated) exists.

error The plugin 'webpack-plugin-hash-output' may conflict with other plugins. Please ensure it is the first plugin in the 'emit' phase. ↓

cause Plugin detects other plugins registered before it that might interfere (e.g., HtmlWebpackPlugin).

fix

Move new HashOutput() to the top of the plugins array.

Warnings

gotcha Plugin must be listed before other plugins like HtmlWebpackPlugin to correctly update asset references. Incorrect order will cause stale hashes in HTML. ↓

fix Place new HashOutput() before any plugin that uses asset filenames, e.g., HtmlWebpackPlugin.

gotcha Sourcemaps are only partially supported. The sourcemap filename is not updated; only the reference inside the chunk is changed, and the sourcemap's 'file' field is updated. This can cause sourcemap lookup failures. ↓

fix Avoid using devtool sourcemaps with this plugin if correct sourcemap filenames are critical.

breaking Version 3.0.0 dropped support for webpack <4. (Breaking change from v2 to v3). ↓

fix Upgrade to webpack >=4 or stay on v2 (which supports webpack 3).

deprecated The 'validateOutput' option is deprecated since v3.2.0 and may be removed in future releases. ↓

fix Remove { validateOutput: true } from options; the validation is now always on.

gotcha When using multiple entry points, all chunk filenames are hashed. Ensure output.filename uses [chunkhash] or [contenthash]. ↓

fix Set output.filename to include [chunkhash] (e.g., '[name].[chunkhash].js').

Install

npm install webpack-plugin-hash-output

yarn add webpack-plugin-hash-output

pnpm add webpack-plugin-hash-output

Imports

HashOutput
wrong
```
import HashOutput from 'webpack-plugin-hash-output';
```
correct
```
const HashOutput = require('webpack-plugin-hash-output');
```
Plugin does not ship ESM; use CommonJS require. A default import via Babel/TypeScript may work if configured, but direct require is safest.
HashOutput
wrong
```
import { HashOutput } from 'webpack-plugin-hash-output';
```
correct
```
import HashOutput from 'webpack-plugin-hash-output';
```
The default export is the constructor. Named import will not work. Use default import or require.
HashOutput
wrong
```
new HashOutput().someMethod()
```
correct
```
new HashOutput({ validateOutput: true })
```
The plugin only has a constructor; no public methods. Configuration is via options object (optional).

Quickstart

Configures webpack to replace chunkhash with content-based MD5 hash, placed before HtmlWebpackPlugin.

const HashOutput = require('webpack-plugin-hash-output');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  output: {
    filename: '[name].[chunkhash].js',
  },
  plugins: [
    new HashOutput({ validateOutput: true }),
    new HtmlWebpackPlugin(),
  ],
};