Copy-webpack-plugin: [contenthash] not being used correctly

[seebeen]

• Operating System: Windows 10 20H2
• Node Version: 12.18.1
• NPM Version: 6.14.10
• webpack Version: 5.22.0
• copy-webpack-plugin Version: 7.0.0

Expected Behavior

I'm using [contenthash] as a filename variable in this format [name]_[contenthash] in order do have different filenames for production builds so I can cache-bust easier.

Most of my images are referenced in css / js files, but some are not, and I'm using WebpackCopyPlugin to copy them.

I expect the cache busted images to have the same hash - no image duplication

Actual Behavior

I get two separate cache-busted filename. One for referenced image, and another one which is from CopyWebpackPlugin.

Code

https://gist.github.com/seebeen/4c33f7ccbfb06bb43aba46fdfe645351 - webpack.config.js
https://gist.github.com/seebeen/a8e52782bf801d0248d6590fbe6b4aaf - webpack.config.optimize.js
https://gist.github.com/seebeen/8484d9c0882316cbab12015b3bf4fc03 - config.js
https://gist.github.com/seebeen/3a51a44841521db1c73170ef82bcd8d8 - assetManifestFormatter.js

How Do We Reproduce?

Create a main.scss file and reference an image. (assets/styles/main.scss)
Place that image in assets/images

Run a production build. Webpack will output two images with two hashes.

[alexander-akait]

Sorry, code is not enough to reproduce the problem, I can't reproduce, please create reproducible test repo

[seebeen]

https://github.com/oblakstudio/wp-webpack

Steps to reproduce.
yarn install
yarn build -> creates 2 files
yarn build:production -> above-h2.png is duplicated

In config.js - using both [name]_[hash] / [name]_[contenthash], or any other hashing function will create separate files

You can see the above-h2.png referenced in scss files.
unreferenced image isn't being used in source files, hence, it's processed only via CopyWebpackPlugin

[alexander-akait]

Interesting, only above-h2_ef402.png has right name, above-h2_55b88.png and unreferenced_55b88.png is wrong, it should have ef402 hash... Investigate

[alexander-akait]

Found two bugs here:

• one in webpack side and copy-webpack-plugin (WIP)
• second in image-minimizer-webpack-plugin

WIP, hope we will fix it in near future, not simple bug

[seebeen]

Since the issue is "internal" and is related to webpack, copy-webpack-plugin and image-minimizer-webpack-plugin, will you raise issues in the mentioned projects?

Thanks for the quick response - much appreciated :)

[alexander-akait]

Yes, reported about it in slack channel, we will fix it in near future

[alexander-akait]

First fix https://github.com/webpack/webpack/releases/tag/v5.24.3, can you try?

[alexander-akait]

Fixed in master, release will be today, but it will be new major release due other changes, to migrate:

• update copy-webpack-plugin to 8.0.0
• use "cacheBusting": "[name]_[contenthash:5]" for better chahing, [hash] and [fullhash] is hash of whole build, it is ineffective for your case
• change value of the to option from images/${assetsFilenames}.[ext]`` toimages/${assetsFilenames}[ext](i.e. no dot before ext) incopy-webpack-plugin` options

[alexander-akait]

WIP on release

[alexander-akait]

Just note - you can speedup your build using:

cache: {
    type: 'filesystem'
  },

Also you don't need CleanWebpackPlugin because we support output.clean. https://webpack.js.org/configuration/output/#outputclean

Also you can avoid using ESLintPlugin and StyleLintPlugin, just setup CI (run it on every PR) or add npm command and run it before sending PR (you can use ling-staged).

After this I have:

webpack 5.24.3 compiled successfully in 273 ms

[alexander-akait]

https://github.com/webpack-contrib/copy-webpack-plugin

[seebeen]

Tested in 3 scenarios. Seems to work perfectly.

I'll do regression testing in other repos which use the system in production.

Regarding the linting plugins. I personally do not use lint-on-build method. I use pre-commit hooks for myself and my dev team.
But this system is meant to be an advanced replacement for this - https://github.com/ahmadawais/WPGulp, and I think people still learning SASS / TypeScript can benefit from the lint-on-save method.

Thanks again for the quick response and the fixes. Much appreciated!