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

【问题标题】：How to remove hash from images with webpack 5如何使用 webpack 5 从图像中删除哈希
【发布时间】：2022-10-03 01:02:21
【问题描述】：

我在使用 webpack 5 进行图像管理时遇到了一些问题。我尝试使用 \"type\" 选项来处理我的项目的图像。它在我只使用 [hash] 和 [ext] 时有效，但在我将 [hash] 替换为 [name] 时无效。

这是我当前工作的图像 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]\'
    }
}

我想删除散列并且只有原始图像名称而不是散列，所以我尝试了这样的事情，但是构建停止并且无法完成。

// 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）运行良好。

标签： webpack

【解决方案1】：

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

【讨论】：