为什么单独定义Web Worker的URL会触发Webpack5中无关的导入语法错误

核心根因：Webpack 的 Worker 处理依赖编译期静态识别 #

Webpack v5 对 Web Worker 的内置支持完全基于编译阶段的 AST 静态分析，不会处理运行时的变量引用逻辑：

• 当你直接写 new Worker(new URL("./worker.js", import.meta.url)) 时，Webpack 的内置 Worker 解析逻辑可以直接识别到 Worker 构造函数的入参是符合规则的 URL 实例调用，会自动将 ./worker.js 标记为独立的 Worker 入口，按照 ES Module 标准编译该文件，同时自动处理 Worker 初始化的模块标识，所以文件内的 import 语句可以正常执行。
• 当你把 new URL() 的结果赋值给单独变量再传入 Worker 构造函数时，Webpack 默认的静态分析能力不会做跨语句的变量追踪，无法识别到这个变量对应的是 Worker 入口文件，也就不会触发 Worker 专属的编译流程。这时候 worker.js 会被当成普通静态资源处理，仅输出原始文件内容，不会按照 ES Module 规则编译。浏览器加载该文件时默认按普通脚本执行，自然会抛出「import 只能出现在模块顶层」的语法错误。

关于 loader 处理差异的补充 #

两种写法命中了 Webpack 不同的处理链路：

• 直接内联 new URL 的写法命中了 Webpack 内置的 Worker 处理逻辑，会对 worker 文件执行专属的编译打包流程，保证输出符合 Worker 模块的执行要求。
• 抽离变量的写法没有命中 Worker 处理规则，new URL 会被当成普通资源路径处理，走通用的资源加载逻辑，没有做 Worker 相关的模块适配，最终导致运行报错。

解决方案 #

• 优先按照 Webpack 官方要求的写法，将 new URL 直接作为 Worker 构造函数的入参使用。
• 如果确实需要抽离变量，可以手动配置 webpack 规则，给指定后缀的 worker 文件绑定 worker loader，强制触发 Worker 编译流程。

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