Webpack无法解析data:text类型import报错的解决方案咨询

问题复现 #

项目依赖的第三方库@web/test-runner-commands中包含如下动态导入语法：

const module = await import(`data:text/javascript;charset=utf-8,${content}`);

执行Webpack构建时抛出模块解析错误：

ERROR in ./node_modules/@web/test-runner-commands/browser/commands.mjs
Module not found: Error: Can't resolve 'data:text' in 'C:\path_to_project\node_modules\@web\test-runner-commands\browser'

已尝试添加babel-loader处理@web目录下的js/mjs文件，未解决问题，相关配置如下：

module: {
    rules: [
        {
            test: /\.m?js$/,
            include: [
                path.resolve(workingDirectory, 'node_modules/@web')
            ],
            use: 'babel-loader'
        }
    ]
}

根因说明 #

babel-loader仅负责语法转译，不会干预Webpack的模块静态解析逻辑。上述报错的核心原因是Webpack默认会对所有import()语句做静态分析，尝试从本地文件系统查找对应依赖，但data:text/javascript是浏览器原生支持的Data URL协议，Webpack无法将其识别为合法的本地模块路径，且该导入的URL内容是运行时通过content变量动态拼接的，构建阶段根本不存在可解析的实体文件。
注意：@web/test-runner-commands是测试运行时专用的浏览器端工具库，正常情况下不应该被生产构建流程引入，如果是生产构建报这个错，优先排查入口代码是否错误引入了测试依赖。

最优解决方式 #

不需要引入额外的自定义解析loader，只要给对应动态导入语句添加Webpack魔法注释webpackIgnore: true，告诉Webpack跳过对该import的静态解析，保留原始代码到产物中，运行时由浏览器原生处理Data URL的导入即可。
可以直接通过string-replace-loader在构建阶段对第三方库的对应代码做替换，不需要修改node_modules源码：

1. 安装依赖

npm install string-replace-loader --save-dev

2. 修改Webpack配置，在原有@web目录的处理规则中追加替换逻辑

module: {
    rules: [
        {
            test: /\.m?js$/,
            include: [
                path.resolve(workingDirectory, 'node_modules/@web/test-runner-commands')
            ],
            use: [
                'babel-loader',
                {
                    loader: 'string-replace-loader',
                    options: {
                        search: /import\(`data:text\/javascript;charset=utf-8,\${content}`\)/g,
                        replace: 'import(/* webpackIgnore: true */ `data:text/javascript;charset=utf-8,${content}`)'
                    }
                }
            ]
        }
    ]
}

备选方案（Webpack 5 原生支持） #

如果不想引入额外loader，也可以通过Webpack 5的内置模块规则匹配Data URL前缀，同时配置别名跳过对data:text开头路径的本地解析：

module: {
    rules: [
        // 原有babel-loader规则保留
        {
            test: /\.m?js$/,
            include: [
                path.resolve(workingDirectory, 'node_modules/@web')
            ],
            use: 'babel-loader'
        },
        // 新增Data URL JS处理规则
        {
            test: /^data:text\/javascript/,
            type: 'asset/source'
        }
    ]
},
resolve: {
    alias: {
        'data:text': false
    }
}

该方案适配性弱于魔法注释方案，因为动态拼接的Data URL内容构建阶段不可知，部分版本Webpack可能仍会抛出解析警告。

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