Webpack 5结合TypeScript使用Web Workers时加载路径错误的问题求助

这个错误的核心原因是你在webpack.config.js里把output.publicPath和devServer.publicPath设置成了本地文件系统的绝对路径，而不是开发服务器的URL路径。Webpack 5处理new URL(...)语法时，会基于publicPath来生成Worker脚本的加载地址，所以才会出现尝试从本地磁盘路径加载的问题，而非你期望的开发服务器路径。

具体修复步骤： #

• 修正output.publicPath配置
  把path.resolve(__dirname, "js/dist/")改为字符串形式的服务器相对路径，path.resolve返回的是本地文件系统的绝对路径，而Webpack需要的是相对于开发服务器根目录的路径：

  output: {
    publicPath: "/js/dist/", // 替换原有的path.resolve写法
    filename: "bundle.js",
    path: path.resolve(__dirname, 'js/dist'),
  }
  

• 修正devServer.publicPath配置
  同样，devServer.publicPath不需要用path.resolve，直接设置为和output.publicPath一致的字符串即可，确保开发服务器能正确映射到打包后的资源：

  devServer: {
    contentBase: path.resolve(__dirname, './'),
    publicPath: "/js/dist/", // 改为对应服务器路径
  }
  

• 确保TypeScript支持import.meta.url
  你的代码里用到了import.meta.url，需要在tsconfig.json中把target设置为至少ES2020（或ESNext），否则TypeScript会报语法错误：

  {
    "compilerOptions": {
      "target": "ES2020",
      "module": "ESNext",
      // 其他已有配置...
    }
  }
  

验证Worker代码 #

你当前创建Worker的写法完全符合Webpack 5的内置规范，不需要额外的worker-loader，Webpack 5会自动把./image-worker对应的文件打包成独立的Worker脚本：

if (window.Worker) { 
  let worker = new Worker(new URL("./image-worker", import.meta.url)); 
  worker.onmessage = function (message) { 
    return receiveMessage(message); 
  }; 
  worker.onerror = function (message) { 
    console.log("ERROR: ", message.error); 
    console.log(message.message, message.filename, message.lineno); 
  }; 
}

完成以上修改后，重启开发服务器，Webpack会正确生成基于开发服务器URL的Worker脚本路径，就不会再出现本地路径加载的错误了。

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