From f43dfa8a1a4b8eb3f9a2009de4a3ad52e5594344 Mon Sep 17 00:00:00 2001 From: biodiscus Date: Mon, 16 Dec 2024 11:53:15 +0100 Subject: [PATCH] test: add test to reproduce issue with cache filesystem, #130 --- .../README.md | 60 +++++++++++++ .../package.json | 10 +++ .../src/index.html | 11 +++ .../src/index.js | 3 + .../webpack.config.js | 86 +++++++++++++++++++ 5 files changed, 170 insertions(+) create mode 100644 test/manual/cache-filesystem-rebuild-image-minimizer/README.md create mode 100644 test/manual/cache-filesystem-rebuild-image-minimizer/package.json create mode 100644 test/manual/cache-filesystem-rebuild-image-minimizer/src/index.html create mode 100644 test/manual/cache-filesystem-rebuild-image-minimizer/src/index.js create mode 100644 test/manual/cache-filesystem-rebuild-image-minimizer/webpack.config.js diff --git a/test/manual/cache-filesystem-rebuild-image-minimizer/README.md b/test/manual/cache-filesystem-rebuild-image-minimizer/README.md new file mode 100644 index 00000000..8f5e4757 --- /dev/null +++ b/test/manual/cache-filesystem-rebuild-image-minimizer/README.md @@ -0,0 +1,60 @@ +# BUG in image-minimizer-webpack-plugin + +See https://github.com/webdiscus/html-bundler-webpack-plugin/issues/130 + +Webpack compilations fail when using filesystem cache: + +``` +Can't handle conflicting asset info for sourceFilename +``` + +# How to reproduce + +Clone repository + +``` +git clone https://github.com/webdiscus/html-bundler-webpack-plugin.git +``` + +Install dev dependencies +``` +cd html-bundler-webpack-plugin +npm i +``` + +Install this test case +``` +cd ./test/manual/cache-filesystem-rebuild-image-minimizer +npm i +``` + +## How to reproduce the bug + +``` +npm run build <= OK +npm run build <= second rebuild occurs error +``` + +## Expected Behavior + +A path to the source file in `sourceFilename` must be relative to the output.path directory. + +## How to fix + +1. Open the file `./test/manual/cache-filesystem-rebuild-image-minimizer/node_modules/image-minimizer-webpack-plugin/dist/loader.js` + +1. Change the line 154: + ```diff + - const filename = isAbsolute ? this.resourcePath : path.relative(this.rootContext, this.resourcePath); + + const filename = !isAbsolute ? this.resourcePath : path.relative(this.rootContext, this.resourcePath); + ``` + +**In the line 154 is the BUG (logical error):**\ +if the path is absolute, then do nothing, else transform it to relative. This doesn't make sense! + +**Correctly should be:**\ +if the path is absolute, then transform it to relative, else do nothing. This is exactly that expected Webpack in webpack/lib/asset/AssetGenerator.js:545: +```js +newAssetInfo = mergeAssetInfo(data.get("assetInfo"), newAssetInfo); // <= here occurs error +``` +When in both objects data.get("assetInfo") and newAssetInfo the same `sourceFilename` contains different (relative and absolute) paths, then the `mergeAssetInfo` function throws the error. diff --git a/test/manual/cache-filesystem-rebuild-image-minimizer/package.json b/test/manual/cache-filesystem-rebuild-image-minimizer/package.json new file mode 100644 index 00000000..97a141aa --- /dev/null +++ b/test/manual/cache-filesystem-rebuild-image-minimizer/package.json @@ -0,0 +1,10 @@ +{ + "scripts": { + "start": "webpack serve --mode development", + "build": "webpack --mode=production --progress" + }, + "devDependencies": { + "html-bundler-webpack-plugin": "file:../../..", + "image-minimizer-webpack-plugin": "4.1.1" + } +} diff --git a/test/manual/cache-filesystem-rebuild-image-minimizer/src/index.html b/test/manual/cache-filesystem-rebuild-image-minimizer/src/index.html new file mode 100644 index 00000000..5eca100a --- /dev/null +++ b/test/manual/cache-filesystem-rebuild-image-minimizer/src/index.html @@ -0,0 +1,11 @@ + + + + + + + +

Hello World!

+ + + \ No newline at end of file diff --git a/test/manual/cache-filesystem-rebuild-image-minimizer/src/index.js b/test/manual/cache-filesystem-rebuild-image-minimizer/src/index.js new file mode 100644 index 00000000..ff2153ee --- /dev/null +++ b/test/manual/cache-filesystem-rebuild-image-minimizer/src/index.js @@ -0,0 +1,3 @@ +import img from './img.jpg'; + +console.log('test', img); diff --git a/test/manual/cache-filesystem-rebuild-image-minimizer/webpack.config.js b/test/manual/cache-filesystem-rebuild-image-minimizer/webpack.config.js new file mode 100644 index 00000000..98b5ca0a --- /dev/null +++ b/test/manual/cache-filesystem-rebuild-image-minimizer/webpack.config.js @@ -0,0 +1,86 @@ +const path = require('path'); +const HtmlBundlerPlugin = require('html-bundler-webpack-plugin'); +const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); + +const svgoConfig = { + multipass: true, + plugins: [ + 'removeDimensions', + { + name: 'cleanupNumericValues', + params: { + floatPrecision: 3, + leadingZero: true, + defaultPx: true, + convertToPx: true, + }, + }, + { + name: 'preset-default', + params: { + overrides: { + removeUnknownsAndDefaults: { + unknownContent: true, + unknownAttrs: true, + defaultAttrs: true, + uselessOverrides: true, + keepDataAttrs: true, + keepAriaAttrs: true, + keepRoleAttr: true, + }, + removeViewBox: false, + }, + }, + }, + ], +}; + +/** @type {import('webpack').Configuration} */ +module.exports = { + mode: 'production', + output: { + path: `${__dirname}/dist`, + clean: true, + }, + resolve: { + alias: { + '@images': path.resolve(__dirname, '../../fixtures/images'), + }, + }, + module: { + rules: [ + { + test: /\.(png|jpe?g|webp|avif|svg|gif|ico)$/i, + type: 'asset/resource', + }, + ], + }, + plugins: [ + new HtmlBundlerPlugin({ + entry: { + index: './src/index.html', + }, + }), + ], + optimization: { + minimizer: [ + new ImageMinimizerPlugin({ + test: /\.(png|jpe?g|webp|avif|svg|gif|ico)$/i, + deleteOriginalAssets: false, + minimizer: { + implementation: ImageMinimizerPlugin.svgoMinify, + options: { + encodeOptions: svgoConfig, + }, + }, + }), + ], + }, + + // test cache filesystem: BUG in image-minimizer-webpack-plugin/dist/loader.js:154 + // See https://github.com/webdiscus/html-bundler-webpack-plugin/issues/130#issuecomment-2544123713 + cache: { + type: 'filesystem', + cacheDirectory: path.join(__dirname, '.cache'), + }, +};