Blob生成JS模块动态导入浏览器正常，Webpack打包后报错如何解决？

问题根因 #

Webpack 默认会拦截所有import()动态导入语法，尝试解析导入路径做代码分割打包处理。你传入的myJSURL是运行时动态生成的 Blob 对象 URL，构建阶段不存在对应的物理文件，Webpack 无法解析路径因此触发报错。

解决方案 #

只需在动态导入语句前添加 Webpack 官方提供的忽略注释，告诉 Webpack 不要处理该导入逻辑，直接交给浏览器原生处理即可，修改后代码如下：

const myJSFile = new Blob( [ 'export default true;' ], { type: 'application/javascript' } );
const myJSURL = URL.createObjectURL( myJSFile );
import(/* webpackIgnore: true */ myJSURL).then(async ( module ) => {
    console.log( module.default );
    // 可选：加载完成后释放Blob资源避免内存泄漏
    URL.revokeObjectURL(myJSURL);
});

配置说明 #

你当前的 Babel 配置已经引入@babel/plugin-syntax-dynamic-import插件支持动态导入语法，不需要额外调整 Webpack 或 Babel 的配置，添加上述注释即可正常运行。

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