Webpack 5无法加载动态GIF文件的问题求助

构建错误：Module parse failed: Unexpected character '�' #

虽然你配置了asset/resource（Webpack 5内置的资源处理方式），但出现这个错误的可能原因及解决方式：

• 确认Webpack版本：运行webpack -v，确保是5.x版本，asset/resource是Webpack 5新增特性，低版本不支持。
• 清理构建缓存：执行webpack --clean清空dist目录和缓存后重新构建。
• 检查配置规则优先级：确保没有其他module.rules中的规则提前匹配了GIF文件，干扰当前配置。

运行时错误：GET file:///.../[object%20HTMLParagraphElement] #

这个错误是由于图片src赋值错误导致的：

• 你写的patty.src = {KrabbyPatty}是将一个对象赋值给src，浏览器会把对象转为字符串[object Object]；你的报错显示[object HTMLParagraphElement]，大概率是误将slogan（p元素对象）当成了图片路径变量。
• 变量名大小写不匹配：你导入的是KrabbyPatty（首字母大写），但尝试使用krabbyPatty（首字母小写），这会导致变量未定义，进而引发意外赋值。

正确代码示例 #

修改home.js中的图片加载逻辑：

import KrabbyPatty from './assets/krabbyPatty.gif';

function createContent() {
    const newDiv = document.createElement('div');
    const slogan = document.createElement('p');
    newDiv.classList.add('content');
    slogan.textContent = 'Home of the beloved Krabby Patty';
    
    const patty = new Image(325, 325);
    // 直接使用导入的变量，不要加大括号
    patty.src = KrabbyPatty;
    
    newDiv.appendChild(slogan);
    newDiv.appendChild(patty);

    return newDiv;
}

验证流程 #

1. 升级Webpack到5.x（若版本不足）：npm install webpack@latest webpack-cli@latest
2. 清理旧构建产物：webpack --clean
3. 重新执行构建命令（如npm run build）
4. 打开dist/index.html确认GIF正常加载，控制台无报错。

内容的提问来源于stack exchange，提问作者Jordan S.