Webpack 5+原生支持Web Worker独立打包，关键在于使用new URL('./worker.ts', import.meta.url)语法、Worker文件独立且不导出主线程复用代码、TS目标设为ES2020+；UmiJS 4零配置即用；需补充webworker类型定义并注意结构化克隆与Transferable传输。
Webpack 本身不“多线程打包”，它是个构建工具；你真正想实现的，是在 Webpack 打包的前端应用中，正确使用 Web Worker 实现 JS 多线程运行——即让耗时逻辑跑在独立线程，不卡主线程。关键不是“Webpack 多线程打包”，而是“Webpack 如何把 Worker 脚本打包成可加载的独立资源”。
下面分三块说清楚，全是实操要点：
Webpack 5+：原生支持，零 loader，靠 new URL()
Webpack 5 开始内置 Worker 支持，不需要额外 loader。只需满足三个条件：
- Worker 文件是独立的 TS/JS 文件（如
calc.worker.ts），开头写self.onmessage = ...，不导出任何供主线程复用的函数或类 - 主线程中必须用
new Worker(new URL('./xxx.worker.ts', import.meta.url))创建实例——不能写字符串路径'./xxx.js' - TypeScript 编译目标设为
"target": "ES2020"或更高，确保生成代码支持import.meta.url
Webpack 会自动把它识别为一个独立 chunk（比如输出 worker-abc123.js），并注入正确的资源路径。UmiJS 4 等封装框架默认就开箱即用，连配置都不用改。
立即学习“Java免费学习笔记（深入）”；
TypeScript 类型和 Worker 环境补全
TS 默认不认识 Worker 全局变量（比如 self、postMessage）。两步搞定类型安全：
- 在
.worker.ts文件顶部加一行：/// <reference lib="webworker" /> - 确认
tsconfig.json的"lib"包含"webworker"，例如："lib": ["ES2020", "DOM", "webworker"]
这样编辑器能提示 self.onmessage、self.close()，编译也不报错。
通信与数据传输：别踩结构化克隆坑
主线程和 Worker 之间只能传可序列化的值，这是硬限制：
- 能传：
string、number、ArrayBuffer、TypedArray、普通对象/数组（不含函数、DOM 节点、RegExp、undefined） - 大数据（如图像像素、大数组）别直接
postMessage(arr)—— 会深拷贝，慢且占内存。改用 Transferable 零拷贝：worker.postMessage(arr, [arr.buffer]) - Worker 里收消息必须显式写：
self.onmessage = (e) => { /* e.data 是主线程传来的数据 */ }；发结果用self.postMessage(result) - 记得监听错误：
worker.onerror = (e) => console.error(e.message)；不用时调worker.terminate()释放资源
Worker 内没有 window、document、localStorage，能用的是 fetch、setTimeout、IndexedDB、WebAssembly 和 self 上的方法。
