如何使用webpack 5从图像中删除哈希

Question

我在使用webpack 5进行图像管理时遇到了一些问题。我试着用"；类型"；为我的项目处理图像的选项。当我只使用[hash]和[ext]时，它有效，但当我用[name]替换[hash]时，就不起作用了。

以下是我目前正在使用的Webpack 5图像配置：

// 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]'
}
}

我想删除hash，并且只有原始图像名称而没有hash，所以我尝试了这样的方法，但构建停止了，无法完成。

// 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]'
}
}

webpack 5可能吗？

这是我的配置：

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

编辑：似乎只有png文件在构建时会导致崩溃，其他图像格式，如jpeg、jpg、svg、webp都能很好地工作。

Answer 1

你试过这个吗？看起来属性assetModuleFilename可以满足您的需要。