How to remove hash from images with webpack 5

Question

I have some problem with image management with webpack 5. I try to use "type" option to handle images for my project. It works when I'm only using [hash] and [ext], but not works when i replace [hash] with [name].

Here is my working current Webpack 5 configuration for images :

// webpack.config.js // Images Files Management const imgConfig = { test: /\.(jpe?g|png|gif|svg|ico)$/i, type: "asset/resource", generator: { filename: 'assets/img/[hash][ext][query]' } }

I want to remove hash and only have original image name and not hash, so I tried something like this, but the build stoped and can't be completed.

// webpack.config.js // Images Files Management const imgConfig = { test: /\.(jpe?g|png|gif|svg|ico)$/i, type: "asset/resource", generator: { filename: 'assets/img/[name][ext]' } }

Is it possible with webpack 5 ?

Here is my configuration :

"devDependencies": { ... "webpack": "^5.74.0", "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2" ... }

EDIT: It's seems that only png files causing crash when building, other image formats like jpeg, jpg, svg, webp are working well.

Gohchi · Accepted Answer · 2022-10-02 17:02:21Z

0

Have you tried this one? It looks like the property assetModuleFilename does what you need.

answered Oct 2, 2022 at 17:02

Gohchi

4694 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to remove hash from images with webpack 5

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related