0

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.

bappla
  • 55
  • 1
  • 6

1 Answers1

0

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

Gohchi
  • 434
  • 3
  • 12