Webpack动态导入资源路径被替换为./报错的问题排查与求助

问题概述 #

使用Webpack 5构建单页Web应用时，动态导入非JS资源（如HTML文件）出现运行时错误：Webpack会将生成代码中的原始相对路径替换为./，导致无法找到对应模块。

复现场景 #

在./resources子文件夹中存在若干.html文件，使用以下动态导入代码：

const s = "file_name";
import( `./resources/${s}.html` ).then( (file)=>console.log( file.default ) );

错误表现 #

1. 运行时抛出异常：

Uncaught (in promise) Error: Cannot find module './file_name.html'

2. 查看Webpack --stats-modules-space输出，可见资源已被打包，但路径处理异常：

modules by path ./src/resources/ 320 bytes
./src/resources/ lazy ^./file_name.*.html$ namespace object 160 bytes [built]
[code generated]

3. 若改为静态常量路径导入，则一切正常：

import( `./resources/file_name.html` ).then( (file)=>console.log( file.default ) );

补充排查细节 #

• 动态导入JS模块（不指定扩展名，文件本身带.js）无异常：

const s = "file_name";
import( `./resources/${s}` ).then( (file)=>console.log( file.default ) );

• 已配置正确的HTML文件导入规则（包括尝试使用raw-loader、指定资源类型查询），均无法解决问题
• 仅带变量的动态导入非JS资源会触发此问题，常量路径或JS模块的动态导入均正常

最终结论 #

Webpack 5存在严重bug：当动态导入路径包含变量时，会默认判定导入资源无文件扩展名，仅支持解析.js、.ts等"原生"JS模块，导致非JS资源的动态导入路径被错误替换为./。即使资源已被正确打包，运行时也无法匹配到对应模块。

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