webpack-contrib/image-minimizer-webpack-plugin

Path to image wrong in css file when use "contenthash".

minhtranite opened this issue · 6 comments

minhtranite commented

Bug report

When using[contenthash] for assetModuleFilename like this:

assetModuleFilename: '[name].[contenthash][ext][query]',

The filename of the asset output is not the same as the url in the CSS file.

Actual Behavior

File names are different between CSS url and output files.

image

Expected Behavior

The CSS url use correct file:
image

How Do We Reproduce?

You can download this project and run build to check CSS file.

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 11.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.75 GB / 16.00 GB
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.24.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 93.1.29.79
    Chrome: 93.0.4577.82
    Edge: 93.0.961.52
    Firefox: 92.0
    Safari: 14.1.2
  Packages:
    image-minimizer-webpack-plugin: ^2.2.0 => 2.2.0 
    webpack: ^5.53.0 => 5.53.0 
    webpack-cli: ^4.8.0 => 4.8.0
alexander-akait commented

You have file-loader, it is deprecated for css-loader v6, no

Clarkkkk commented

Same here. Using optimization.realContentHash: false can avoid this problem.

alexander-akait commented

Please update mini-css-extract-plugin to the latest stable version

alexander-akait commented

Bug in mini-css-extract-plugin - fixed in 2.4.x version with new API

minhtranite commented

Bug in mini-css-extract-plugin - fixed in 2.4.x version with new API

I updated and it works. Thank you @alexander-akait

alexander-akait commented

We migrate on the new API, old API has bugs, so I recommend to update mini-css-extract-plugin

  • 👍1