[contenthash] not being used correctly

seebeen commented 3 years ago

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 commented 3 years ago

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

seebeen commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

alexander-akait commented 3 years ago

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

alexander-akait commented 3 years ago

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 commented 3 years ago

WIP on release

alexander-akait commented 3 years ago

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 commented 3 years ago

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

seebeen commented 3 years ago

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!

webpack-contrib / copy-webpack-plugin