如何避免webpack打包时生成哈希命名的损坏图片资源

问题原因 #

该问题的核心是webpack 5 内置的静态资源处理模块（Asset Modules）和你配置的file-loader产生了重复处理冲突：
webpack 5 默认会对匹配的图片资源走内置asset/resource处理逻辑，默认输出哈希命名的文件到dist根目录，这就是你看到的几个损坏文件；同时你配置的file-loader又生成了一份正常的图片文件到img目录，两个处理逻辑同时生效，就出现了重复文件，且页面最终引用了内置模块输出的根目录损坏文件。

解决方案 #

方案1：直接使用webpack 5 内置Asset Modules（推荐） #

直接删掉原有的file-loader配置，替换为内置资源模块规则即可，不需要额外安装loader：

// webpack/webpack.config.js
module.exports = {
    // 原有entry、output配置保持不变
    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: "js/[name].js",
        clean: true,
        // 可根据实际部署路径调整publicPath，默认auto会自动适配相对路径
        publicPath: 'auto'
    },
    module: {
        rules: [
            // 删掉原来的file-loader相关配置，替换为下面的规则
            {
                test: /\.(png|svg|jpe?g|gif|webp)$/i,
                type: 'asset/resource',
                generator: {
                    // 直接指定输出路径，会自动生成到dist/img目录下
                    filename: 'img/[name][ext]'
                    // 如果需要加哈希避免缓存问题，可以写成filename: 'img/[name].[hash:8][ext]'
                }
            },
            // 其他原有规则保持不变
        ]
    },
    // 原有plugins配置保持不变
};

方案2：如果你需要继续使用file-loader #

需要手动关闭webpack 5 内置的图片资源处理逻辑，避免冲突，同时修正outputPath的斜杠配置：

// webpack/webpack.config.js
module.exports = {
    // 其他原有配置保持不变
    module: {
        rules: [
            {
                test: /\.(png|svg|jpe?g|gif|webp)$/i,
                // 关闭内置资源处理逻辑，仅走file-loader处理
                type: 'javascript/auto',
                loader: 'file-loader',
                options: {
                    // 去掉outputPath开头的斜杠，避免被识别为绝对路径
                    outputPath: 'img/',
                    name: "[name].[ext]",
                    useRelativePaths: true,
                    publicPath: '../img/'
                }
            },
            // 其他原有规则保持不变
        ]
    },
};

内容的提问来源于stack exchange，提问作者Mohammad Aghazadeh