npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@shopify/webpack-plugin-hash-output

v3.0.7

Published

Temporary fork of the plugin for Webpack that uses the final output to compute the hash of an asset

Downloads

841

Readme

webpack-plugin-hash-output (Shopify fork)

Plugin to replace webpack chunkhash with an md5 hash of the final file conent.

This is a temporary Shopify fork containing:

  • Better support for mini-css-extra-plugin

@GoodForOneFare submitted a mini-css-extra-plugin PR to the main repo, but it was refactored in a way that didn't produce valid results for all Shopify apps.

Installation

With npm

npm install webpack-plugin-hash-output --save-dev

With yarn

yarn add webpack-plugin-hash-output --dev

Why?

There 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 before plugins like webpack.optimize.UglifyJsPlugin. In other words, if you change webpack.optimize.UglifyJsPlugin config, your hashes won't change, creating potential conflicts with cached resources.

The main difference is that webpack-plugin-hash-output runs in the last compilation step. So any change in webpack or any other plugin that actually changes the output, will be "seen" by this plugin, and therefore that change will be reflected in the hash.

It will generate files like entry.<hash>.js, where <hash> is always a hash of the content (well, a subset of). Example:

$ md5 entry.32f1718dd08eccda2791.js

MD5 (entry.32f1718dd08eccda2791.js) = 32f1718dd08eccda2791ff7ed466bd98

All other assets (common files, manifest files, HTML output...) will use the new md5 hash to reference the asset.

Compatibility

Requires webpack >=4

Usage

Just add this plugin as usual.

// webpack.config.js
var HashOutput = require('webpack-plugin-hash-output');

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

Sourcemap support

This plugin partially supports sourcemaps. When a chunk hash is recomputed, it will update the name of the chunk in the chunks's sourcemap, but it won't recompute the name of the hash file. This has the side effect that the name of the sourcemap will differ from the name of the chunk. Example:

Before:

// app.<oldhash>.js

// ...code...
//# sourceMappingURL=entry.<oldhash>.js.map
// app.<oldhash>.js.map

// ...
"file":"app.<oldhash>.js"
// ...

After:

// app.<newhash>.js

// ...code...
//# sourceMappingURL=entry.<oldhash>.js.map
// app.<oldhash>.js.map

// ...
"file":"app.<newhash>.js"
// ...

We can't fully support sourcemaps (i.e. recomute sourcemap hash) because the circular reference: we can't compute sourcemap hash without computing the file hash first, and we can't compute the file hash without the sourcemap hash.

Options

Note: Use Webpack's own hash output options to configure hash function and length.

options.validateOutput

boolean, defaults to false.

After 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 and the webpack process will fail.

options.validateOutputRegex

regex, defaults to /^.*$/

When validating the output (see options.validateOutput), only evaluate hashes for files matching this regexp. Useful for skipping source maps or other output. Example:

module.exports = {
    entry: {
        main: './src/app.js',
    },
    output: {
        filename: 'assets/[name].[chunkhash].js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'fragments/app.html',
            chunks: ['main'],
        }),
        new OutputHash({
            validateOutput: true,
            // Check that md5(assets/main.<hash>.js) === <hash>, but doesn't check fragments/app.html
            validateOutputRegex: /^assets\/.*\.js$/,
        }),
    ]
};

Contributions

Running tests

Tests can be run by:

yarn test

After running the tests, you might want to run yarn run clean to clean up temp files generated by the tests.