打包器靠 AST 形狀認出 worker,改寫法會靜默失效

webpack 預設只認 new Worker(new URL('./x.worker.ts', import.meta.url)) 這個確切的 AST pattern。認出來它才會把 worker 獨立打包成 chunk,並把 new URL(...) 改寫成真實的(production 帶 hash 的)chunk 網址。

// webpack.config.js — 讓自訂包裝類別也被認得
module: {
  parser: { javascript: { worker: ['CorsWorker from @/utils/CorsWorker', '...'] } }
}

'...' 是保留預設偵測,不要覆蓋掉原生的 new Worker

為什麼危險

把 URL 抽成變數、或多包一層函式,偵測就失效——結果是吐出一個原始的 .ts asset 而不是打包好的 chunk,沒有 build error,只有 runtime 才炸。所以這種呼叫點必須維持確切寫法,值得在原始碼裡留註解說明(實務上也該考慮加一個 build-time assert 檢查產物)。

跨源 worker 的 blob 包裝

Module Federation 下 worker chunk 與頁面不同源,直接 new Worker(remoteUrl) 會被擋,常見解法是包一層同源 blob 再 importScripts用同源 blob 包一層 importScripts 建立跨源 Worker

相關:Web Worker 不需要註冊,Service Worker 才需要