在TypeScript+NextJS+Webpack5环境下初始化Web Worker报错如何解决？

AI 小北

2026-10-9

报错原因

根本原因是你当前使用的worker-loader版本和Webpack 5不兼容：旧版worker-loader依赖Webpack 4中存在的MainTemplate.hooks.hotBootstrap钩子，而Webpack 5已经正式移除了该钩子，导致编译时抛出对应错误。
额外冲突点：你同时在导入语句中使用了内联worker-loader前缀，又在next.config.js中配置了全局.worker.ts文件的loader规则，重复的loader加载逻辑也可能加重编译异常。

解决方案

按顺序执行以下操作即可修复问题：

升级兼容Webpack 5的worker-loader版本
执行以下命令安装最新版worker-loader：

npm install worker-loader@latest -D
# 若使用yarn则执行
yarn add worker-loader@latest -D

移除导入语句的内联loader前缀
你已经在全局配置了.worker.ts的处理规则，不需要再在内联导入时重复指定loader，修改worker-client.ts的导入语句为：

import WorkerFile from "../workers/worker";

同步调整类型声明文件
因为已经移除了内联loader参数，所以修改web-worker.d.ts的模块声明匹配规则：

declare module "*.worker.ts" {
  class WebpackWorker extends Worker {
    constructor();
  }
  export default WebpackWorker;
}

可选：替换为Webpack 5原生Worker支持（更稳定，无需额外loader）
Webpack 5本身已经内置了Web Worker的处理能力，完全可以卸载worker-loader直接使用原生写法，步骤更简单：

先卸载worker-loader，删除next.config.js中所有和worker-loader相关的配置
修改worker-client.ts的Worker初始化逻辑为：

export const WorkerClient = () => {
  const worker = new Worker(new URL("../workers/worker.ts", import.meta.url));
  const communicate = () => {
    worker.onmessage = (evt) =>
      alert(`WebWorker Response => ${evt.data}`)
    worker.postMessage('Hello John');
  }
}