worker-loader

该加载器将脚本注册为Web Worker

安装

npm i -D worker-loader

用法

App.js

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

Config

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

选项

Name	类型	默认	描述
name	{String}	hash.worker.js	为输出脚本设置一个自定义名称
一致	{Boolean}	false	将工作人员内联为BLOB
倒退	{Boolean}	false	需要非工作人员支持环境的回退
publicPath	{String}	null	覆盖从中下载工作者脚本的路径

name

要为输出脚本设置自定义名称，请使用name参数。该名称可能包含字符串[hash]，为了缓存目的，该字符串将替换为依赖于内容的哈希

webpack.config.js*

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

inline

您还可以使用该inline参数将工作人员内联为BLOB

webpack.config.js

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

In️内联模式也会为浏览器创建块，而不支持内联工作者，为了禁用此行为，只需将fallback参数设置为false

webpack.config.js

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

fallback

需要非工作人员支持环境的回退

webpack.config.js

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

publicPath

覆盖下载工作程序脚本的路径。如果未指定，则使用与其他 webpack 相同的公共路径

webpack.config.js

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

例子

worker 文件可以像任何其他文件一样导入依赖项

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

Integrating with ES2015 Modules

ℹ️如果您已babel-loader配置，您甚至可以使用ES2015模块。

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

Integrating with TypeScript

要与 TypeScript 集成，您需要为工作人员的导出定义一个自定义模块

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

Cross-Origin Policy

WebWorkers受到同源策略的限制，因此如果您的webpack资产没有与您的应用程序源自同一来源，则其下载可能会被您的浏览器阻止。如果您托管 CDN 域下的资产，通常会出现这种情况。即使从这里下载webpack-dev-server也可能被阻止。有两种解决方法

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

App.js

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

webpack.config.js

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

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

App.js

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

webpack.config.js

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