使用Worker打包报错

使用Worker打包报错

问题可能出在 worker-loader 与 Webpack 版本的兼容性，
一、若使用 Vue CLI 5（Webpack 5，推荐）
Webpack 5 内置 Worker 支持，无需 worker-loader，直接移除相关配置，改用原生语法导入 Worker：
1.删除 chainWebpack 中的 worker-loader 配置
// 移除以下代码 // chainWebpack: (config) => { // config.module // .rule("worker") // .test(/\.worker\.js$/) // .use("worker-loader") // .loader("worker-loader") // .options({ // inline: "fallback", // }) // .end() // .exclude.add(/node_modules/); // }

2.在代码中用原生方式创建 Worker```// 无需 import，直接通过 URL 构造函数创建const transcodeWorker = new Worker(new URL('../workers/transcode.worker.js', import.meta.url),{ type: 'module' } // 若 Worker 内用了 ES 模块语法（import/export），必须加此配置);```

二、若使用 Vue CLI 4（Webpack 4）
需保留 worker-loader，但需避免与 babel-loader、thread-loader 冲突（确保它们不处理 .worker.js 文件）
1.修改 chainWebpack 配置，补充对 babel-loader 的排除规则：

chainWebpack: (config) => {// 1. 配置 worker-loader 处理 .worker.jsconfig.module.rule("worker").test(/\.worker\.js$/).use("worker-loader").loader("worker-loader").options({inline: "fallback", // 保持原配置}).end().exclude.add(/node_modules/);// 2. 让 babel-loader 排除 .worker.js（避免重复处理）config.module.rule("js") // Vue CLI 默认的 js 处理规则.exclude.add(/\.worker\.js$/) // 排除 Worker 文件.end();
}

2.安装兼容 Webpack 4 的 worker-loader 版本（若版本不兼容会报错）

npm install worker-loader@3.x --save-dev # 3.x 版本兼容 Webpack 4

3.代码中导入 Worker 的方式

import TranscodeWorker from '../workers/transcode.worker.js';
const transcodeWorker = new TranscodeWorker();