Webpack5微前端React应用本地SVG/PNG加载失败（404）求助

核心问题：资源引用方式错误 #

你在Navbar组件里直接用字符串相对路径"./assets/Logo.svg"作为img的src，这种写法Webpack不会对资源做打包处理，浏览器会从当前页面的URL路径下去查找文件，必然返回404。Webpack5的asset/resource规则需要通过ES模块导入的方式识别并处理资源文件。

解决方案 #

1. 修改组件中的资源引用方式 #

通过import导入图片资源，再用导入的变量作为src值：

import React from "react";
import Logo from "./assets/Logo.svg"; // 导入本地资源

export default function Navbar() {
  return (
    <img src={Logo} alt="Logo" />
  )
}

这样Webpack会自动将SVG文件打包到输出目录，并把Logo变量替换为正确的资源访问路径。

2. 验证Webpack配置的正确性 #

你的Webpack配置中asset/resource规则设置正确，额外确认两点即可：

• output.publicPath设置为"http://localhost:3000/"在开发环境是合理的，能确保资源从devServer正确加载；
• resolve.extensions已包含常见文件后缀，无需调整。

3. 可选：配置路径别名简化导入 #

如果项目层级较深，频繁写相对路径麻烦，可在Webpack的resolve中添加别名：

const path = require("path"); // 先引入path模块

module.exports = {
  // ...其他配置
  resolve: {
    extensions: [".vue", ".tsx", ".ts", ".jsx", ".js", ".json"],
    alias: {
      "@assets": path.resolve(__dirname, "src/components/assets"), // 配置别名
    },
  },
  // ...其他配置
};

之后组件中可以简化导入：

import Logo from "@assets/Logo.svg";

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