webpack 5+ 原生支持 web worker 独立打包，关键在于使用 new url('./worker.ts', import.meta.url) 语法并确保 typescript 目标为 es2020+；umijs 4 零配置即用；旧版需 worker-loader，但功能受限。
Webpack 配置 Web Worker 实现独立线程打包，关键在于让 Worker 脚本被识别为单独的 chunk，而非普通模块。现代方案已大幅简化，但配置逻辑仍需清晰——核心不是“加 loader”，而是“适配 Webpack 的原生 Worker 识别机制”。
Webpack 5+ 原生支持：用 new URL() 语法自动拆包
Webpack 5 开始原生支持 new Worker(new URL('./worker.ts', import.meta.url)) 写法。只要满足以下条件，无需任何额外 loader 或规则：
- Worker 文件必须是独立的 TypeScript 文件（如
calc.worker.ts），不能导出给主线程复用的类或函数 - 主线程中必须使用
new URL(..., import.meta.url)构造方式，不能直接写字符串路径 - TypeScript 编译目标需兼容 ES2020+（
"target": "ES2020"），确保生成的 JS 支持import.meta.url
UmiJS 4 等封装框架：零配置即用
UmiJS 4 底层基于 Webpack 5，已默认启用上述能力。你只需：
- 在
src/下新建my.worker.ts，内容以self.onmessage = ...开头 - 主线程中写：
const worker = new Worker(new URL('./my.worker.ts', import.meta.url)); - 运行
umi build或umi dev，Webpack 会自动将其打包为独立 chunk（如worker-xxx.js）
不需要修改 .umirc.ts，也不需要安装 worker-loader。
传统 Webpack 项目：仍可手动配置 worker-loader（不推荐）
若项目未升级到 Webpack 5，或需兼容旧版浏览器，可用 worker-loader，但需注意：
- 安装依赖：
npm install --save-dev worker-loader - 在
webpack.config.js中添加规则：{ test: /\.worker\.(ts|js)$/, use: { loader: 'worker-loader' } } - Worker 文件命名建议带
.worker.ts后缀，避免被 ts-loader 错误处理 - 主线程中导入方式变为：
import MyWorker from './calc.worker.ts'; const worker = new MyWorker();
该方式会把 Worker 打包进主 bundle 或单独 chunk，但失去 Webpack 5 的动态 import 和资源预加载能力。
TypeScript 类型安全：补全 Worker 全局类型
默认 TypeScript 不认识 self 在 Worker 中的上下文。在 worker.ts 文件顶部加一行声明即可：
/// <reference lib="webworker"></reference>
self.onmessage = (e) => { /* ... */ };
同时确保 tsconfig.json 的 lib 包含 "webworker"：
"compilerOptions": {
"lib": ["ES2020", "DOM", "WebWorker"]
}
