1. Worker Loader

这个 loader 将脚本注册为 Web Worker

1.1. 安装

npm i -D worker-loader

1.2. 用法

1.2.1. 内联

App.js

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

1.2.2. 配置

webpack.config.js

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

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) {});

1.3. 选项

1.3.1. name

使用 name 参数为输出脚本设置一个自定义的名字。这个参数可以包含[hash]字符串，它将被『用于缓存目的』的『内容相关哈希』取代

webpack.config.js*

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

1.3.2. inline

可以使用 inline 参数将 worker 内联为 BLOB

webpack.config.js

{
  loader: 'worker-loader',
  options: { inline: true }
}

[info]

内联模式还将为不支持内联 worker 的浏览器创建 chunk ，为了禁止该行为，只需将 fallback 参数设置为 false

webpack.config.js

{
  loader: 'worker-loader'
  options: { inline: true, fallback: false }
}

1.3.3. fallback

为非 worker 环境支持 rerquire 一个回退方案。

webpack.config.js

{
  loader: 'worker-loader'
  options: { fallback: false }
}

1.3.4. publicPath

覆盖来自 worker 脚本被下载的路径。如果未指定，则使用其他 webpack 资产的相同公共路径使用其他webpack资产的相同公共路径

webpack.config.js

{
  loader: 'worker-loader'
  options: { publicPath: '/scripts/workers/' }
}

1.4. 示例

文件可以像其他文件那样导入依赖。

Worker.js

const _ = require('lodash')

const obj = { foo: 'foo' }

_.has(obj, 'foo')

// 将数据发送到父线程
self.postMessage({ foo: 'foo' })

// 对来自父线程的消息进行响应
self.addEventListener('message', (event) => console.log(event))

1.4.1. 与 ES2015 模块集成

[info]

如果配置了 babel-loader，甚至可以使用 ES2015 模块。

Worker.js

import _ from 'lodash'

const obj = { foo: 'foo' }

_.has(obj, 'foo')

// 将数据发送到父线程
self.postMessage({ foo: 'foo' })

// 对来自父线程的消息进行响应
self.addEventListener('message', (event) => console.log(event))

1.4.2. 与 TypeScript 集成

为了与 TypeScript 集成，需要为 worker 的导出定义一个自定义的模块

typings/custom.d.ts

declare module "worker-loader!*" {
  class WebpackWorker extends Worker {
    constructor();
  }

  export = WebpackWorker;
}

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));

App.ts

import Worker = require("worker-loader!./Worker");

const worker = new Worker();

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

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

1.4.3. 跨域规则（Cross-Origin Policy）

WebWorkers 受到同源规则（same-origin policy）的限制，因此，如果您的 webpack 资源与您的应用程序来自不同的域，那么它们的下载可能会被浏览器阻塞。如果您在一个CDN域下托管您的资源，这种情况通常会发生。甚至从 webpack-dev-server 上下载都会被阻塞。有两个解决方法：

首先，您可以将 worker 内联为 blob，而不是通过inline 参数将其作为外部脚本下载

App.js

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

webpack.config.js

{
  loader: 'worker-loader'
  options: { inline: true }
}

其次，您可以通过publicPath选项覆盖您的 worker 脚本的基本下载URL

App.js

// 这将导致 worker 从 `/workers/file.worker.js`
 中下载
import Worker from './file.worker.js';

webpack.config.js

{
  loader: 'worker-loader'
  options: { publicPath: '/workers/' }
}

1.5. 维护者

Bogdan Chadkin

Juho Vepsäläinen

Joshua Wiens

Michael Ciniawsky

Alexander Krasnoyarov