worker-loader

[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![chat][chat]][chat-url] [![size][size]][size-url]

将脚本注册为 Web Worker 的 webpack loader

要求

此模块需要 Node v6.9.0+ 和 webpack v4.0.0+。

起步

你需要预先安装 worker-loader：

$ npm install worker-loader --save-dev

内联

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

配置

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

然后，通过你偏爱的方式去运行 webpack。

选项

fallback

类型：Boolean 默认值：false

是否需要支持非 worker 环境的回退

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

inline

类型：Boolean 默认值：false

你也可以使用 inline 参数，将 worker 内联为一个 BLOB

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

注意：内联模式还会为不支持内联 worker 的浏览器创建 chunk， 要禁用此行为，只需将fallback 参数设置为 false。

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

name

类型：String 默认值：[hash].worker.js

使用 name 参数，为每个输出的脚本，设置一个自定义名称。 名称可能含有 [hash] 字符串，会被替换为依赖内容哈希值(content dependent hash)，用于缓存目的。 只使用 name 时，可以省略 [hash]。

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

publicPath

类型：String 默认值：null

重写 worker 脚本的下载路径。如果未指定， 则使用与其他 webpack 资源相同的公共路径(public path)。

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

示例

worker 文件可以像其他脚本文件导入依赖那样，来导入依赖：

// Worker.js
const _ = require('lodash')
const obj = { foo: 'foo' }
_.has(obj, 'foo')
// 发送数据到父线程
self.postMessage({ foo: 'foo' })
// 响应父线程的消息
self.addEventListener('message', (event) => console.log(event))

集成 ES2015 模块

注意：如果配置好 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))

集成 TypeScript

集成 TypeScript，在导出 worker 时，你需要声明一个自定义模块

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

// Worker.ts
const ctx: Worker = self as any;
// 发送数据到父线程
ctx.postMessage({ foo: "foo" });
// 响应父线程的消息
ctx.addEventListener("message", (event) => console.log(event));

// App.ts
import Worker from "worker-loader!./Worker";
const worker = new Worker();
worker.postMessage({ a: 1 });
worker.onmessage = (event) => {};
worker.addEventListener("message", (event) => {});

跨域策略

WebWorkers 受到 同源策略 的限制， 如果 webpack 资源的访问服务，和应用程序不是同源， 就会在浏览器中拦截其下载。 如果在 CDN 域下托管资源， 通常就会出现这种情况。 甚至从 webpack-dev-server 下载时都会被拦截。有两种解决方法：

第一种，通过配置 inline 参数，将 worker 作为 blob 内联， 而不是将其作为外部脚本下载

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

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

第二种，通过配置 publicPath 选项， 重写 worker 脚本的基础下载 URL

// App.js
// 会从 `/workers/file.worker.js` 下载 worker 脚本
import Worker from './file.worker.js';

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

贡献

如果你从未阅读过我们的贡献指南，请在上面花点时间。

贡献指南 贡献指南” class=”icon-link” href=”#贡献指南”>

License

MIT MIT” class=”icon-link” href=”#mit”>