# @builder\.io/worker-loader 中文文档

规范地址：https://npmcn.com/package/%40builder.io/worker-loader/

版本：2\.0\.1
npm 元数据更新时间：2026-09-09T09:17:31.747Z
中文译文更新时间：2026-11-08T20:36:40.844Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40builder.io/worker-loader
原文对照：https://npmcn.com/package/%40builder.io/worker-loader/?lang=original
项目主页：https://github.com/webpack-contrib/worker-loader
源码仓库：https://github.com/webpack-contrib/worker-loader

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：18.7 kB，10 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>= 6\.9\.0 \< 7\.0\.0 \|\| \>= 8\.9\.0
- 运行依赖：2 个
- peer 依赖：webpack ^3\.0\.0 \|\| ^4\.0\.0-alpha\.0 \|\| ^4\.0\.0
- 首次发布：2020-01-27T20:49:01.038Z
- 最新版本发布：2020-01-27T21:18:15.656Z
- 近 30 天下载量：2327（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

网络包装工人装载器模块

## 安装

```sh
npm install @builder.io/worker-loader
```

也可以使用：`pnpm add @builder.io/worker-loader`、`yarn add @builder.io/worker-loader`、`bun add @builder.io/worker-loader`

## README

[![](https://webpack.js.org/assets/icon-square-big.svg)](https://github.com/webpack/webpack)

[![npm](https://img.shields.io/npm/v/worker-loader.svg)](https://npmjs.com/package/worker-loader) [![node](https://img.shields.io/node/v/worker-loader.svg)](https://nodejs.org/) [![deps](https://david-dm.org/webpack-contrib/worker-loader.svg)](https://david-dm.org/webpack-contrib/worker-loader) [![tests](https://img.shields.io/circleci/project/github/webpack-contrib/worker-loader.svg)](https://circleci.com/gh/webpack-contrib/worker-loader) [![chat](https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg)](https://gitter.im/webpack/webpack) [![size](https://packagephobia.now.sh/badge?p=worker-loader)](https://packagephobia.now.sh/result?p=worker-loader)

# 工人装载器

网络包装工人装载器模块

## 所需资源

这个模块需要最小的节点v6.9.0和Webpack v4.0.0.

## 开始

开始,你需要安装 `worker-loader`数字 :

```console
$ npm install worker-loader --save-dev
```

### 内含

```js
// App.js
import Worker from 'worker-loader!./Worker.js';
```

### 配置

```js
// webpack.config.js
{
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  }
}
```

```js
// App.js
import Worker from './file.worker.js';

const worker = new Worker();

worker.postMessage({ a: 1 });
worker.onmessage = function (event) {};

worker.addEventListener("message", function (event) {});
```

跑开 `webpack` 通过你喜欢的方法.

## 选项

### `fallback`

类型 : `Boolean` 默认 : `false`

要求非工人辅助环境倒置

```js
// webpack.config.js
{
  loader: 'worker-loader'
  options: { fallback: false }
}
```

### `inline`

类型 : `Boolean` 默认 : `false`

也可以将工人作为BLOB与 `inline` 参数

```js
// webpack.config.js
{
  loader: 'worker-loader',
  options: { inline: true }
}
```

_注意: 内置模式也会为浏览器创建块而不支持 内线工人,要禁用此行为刚刚设定 `fallback` 参数为 `false`。 。 。 ._

```js
// webpack.config.js
{
  loader: 'worker-loader'
  options: { inline: true, fallback: false }
}
```

### `name`

类型 : `String` 默认 : `[hash].worker.js`

要设置输出脚本的自定义名称,请使用 `name` 参数。 名称 可能包含字符串 `[hash]`,将替换为内容依赖 用大麻来拉屎 使用时 `name` 一个人 `[hash]` 省略.

```js
// webpack.config.js
{
  loader: 'worker-loader',
  options: { name: 'WorkerName.[hash].js' }
}
```

### 公开

类型 : `String` 默认 : `null`

覆盖下载工人脚本的路径. 如未指明, 其他网络包装资产所使用的公共路径.

```js
// webpack.config.js
{
  loader: 'worker-loader'
  options: { publicPath: '/scripts/workers/' }
}
```

### 横跨奥里金

类型 : `Boolean` 默认 : `false`

如果您想在CDN和CDN上挂载您的 Javascript 和 工人代码,此操作很有用 只有您已经配置了 publicPath 才有意义 [全球网络包装](https://webpack.js.org/guides/public-path/) 或本地为 此加载器在您 html 上的不同域上得到服务 .

```js
// **webpack.config.js**
{
  loader: 'worker-loader'
  options: {
    publicPath: 'https://cdn.mysite.fast/',
    crossOrigin: true,
  }
}
```

## 实例

工人文件可以像其它文件一样导入依赖性 :

```js
// Worker.js
const _ = require('lodash')

const obj = { foo: 'foo' }

_.has(obj, 'foo')

// Post data to parent thread
self.postMessage({ foo: 'foo' })

// Respond to message from parent thread
self.addEventListener('message', (event) => console.log(event))
```

### 与ES2015模块相结合

_备注:如果有 ES-2015 模块,甚至可以使用 [`babel-loader`](https://github.com/babel/babel-loader) 已配置 ._

```js
// Worker.js
import _ from 'lodash'

const obj = { foo: 'foo' }

_.has(obj, 'foo')

// Post data to parent thread
self.postMessage({ foo: 'foo' })

// Respond to message from parent thread
self.addEventListener('message', (event) => console.log(event))
```

### 与类型脚本融合

要与 TypeScript 集成, 您需要为您的员工的输出定义自定义模块

```typescript
// typings/custom.d.ts
declare module "worker-loader!*" {
  class WebpackWorker extends Worker {
    constructor();
  }

  export default WebpackWorker;
}
```

```typescript
// Worker.ts
const ctx: Worker = self as any;

// Post data to parent thread
ctx.postMessage({ foo: "foo" });

// Respond to message from parent thread
ctx.addEventListener("message", (event) => console.log(event));
```

```typescript
// App.ts
import Worker from "worker-loader!./Worker";

const worker = new Worker();

worker.postMessage({ a: 1 });
worker.onmessage = (event) => {};

worker.addEventListener("message", (event) => {});
```

### 跨奥里金政策

[`WebWorkers`](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 受a的限制 [同源政策](https://en.wikipedia.org/wiki/Same-origin_policy)因此,如果  `webpack` 资产不是来自您 应用程序,其下载可能被您的浏览器屏蔽。 这种情景可以 通常情况下,如果您在 CDN 域下托管您的资产。 甚至下载 从 `webpack-dev-server` 可能会被封锁 有两个绕道:

首先,你可以把工人装成一个blob,而不是把它装成一个 外部脚本通过 [`inline`](https://npmcn.com/package/%40builder.io/worker-loader/#readme-inline) 参数

```js
// App.js
import Worker from './file.worker.js';
```

```js
// webpack.config.js
{
  loader: 'worker-loader'
  options: { inline: true }
}
```

第二,您可以通过 [`publicPath`](https://npmcn.com/package/%40builder.io/worker-loader/#readme-publicpath) 选项

```js
// App.js
// This will cause the worker to be downloaded from `/workers/file.worker.js`
import Worker from './file.worker.js';
```

```js
// webpack.config.js
{
  loader: 'worker-loader'
  options: { publicPath: '/workers/' }
}
```

## 捐款

请花点时间来读一下我们的贡献准则 如果你还没有这样做.

#### [捐款](https://npmcn.com/package/%40builder.io/worker-loader/.github/CONTRIBUTING.md)

## 许可证

#### [麻省理工学院](https://npmcn.com/package/%40builder.io/worker-loader/LICENSE)

## 常见问题

### @builder\.io/worker-loader 是什么？

网络包装工人装载器模块

### 如何安装 @builder\.io/worker-loader？

在项目目录运行 npm install @builder\.io/worker-loader，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：webpack（^3\.0\.0 \|\| ^4\.0\.0-alpha\.0 \|\| ^4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 worker-loader，可以用 npx worker-loader 直接运行。

### @builder\.io/worker-loader 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/builder\.io\_\_worker-loader 是否存在。

### @builder\.io/worker-loader 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @builder\.io/worker-loader 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>= 6\.9\.0 \< 7\.0\.0 \|\| \>= 8\.9\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @builder\.io/worker-loader 可以商用吗？

@builder\.io/worker-loader 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @builder\.io/worker-loader 的下载量有多少？

根据 npm 官方下载统计，@builder\.io/worker-loader 在 2026/10/09 – 2026/11/07 这 30 天内被下载 2,327 次，日均约 78 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @builder\.io/worker-loader 还在维护吗？

最新版本 2\.0\.1 发布于 2020/01/28（6 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/01/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。