使用webpack打包加载图片资源时返回404错误问题咨询

问题根因与解决步骤 #

1. webpack资源类型配置错误
   你当前配置中图片处理规则的type: 'images'是无效值，webpack5内置资源模块中，用于将资源输出为独立文件的正确类型为asset/resource，配置错误会导致webpack完全不处理你的图片资源，自然不会输出到构建产物中。

修改webpack.config.js的module.rules配置：

module: {
    rules: [
        {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
            // 可选配置：指定图片打包后输出到dist下的images目录
            generator: {
                filename: 'images/[contenthash][ext]'
            }
        },
    ]
}

2. 硬编码的资源路径不会被webpack解析
   你在代码中直接写死的字符串'images/virtual-machine.svg'不会被webpack识别为资源引用，无法自动替换为打包后的实际路径，需要先显式导入资源再使用：

// JS文件顶部先导入svg资源
import vmSvg from './images/virtual-machine.svg'

// 赋值属性时使用导入后的变量
.attr('xlink:href', vmSvg)

3. 清理无效依赖（可选）
   你依赖列表中的wepack-cli": "0.0.1-security"是拼写错误的无效安全包，没有实际作用，可直接卸载：

npm uninstall wepack-cli

修改完成后重新运行打包命令或者重启devServer即可解决404问题。

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