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/' }
}
贡献
如果你从未阅读过我们的贡献指南，请在上面花点时间。