打包器靠 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。