使用Worker打包报错

可别3902025-11-05 17:33

使用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.js
  config.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();