工人装载器
网络包装工人装载器模块
所需资源
这个模块需要最小的节点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
要求非工人辅助环境倒置
// webpack.config.js
{
loader: 'worker-loader'
options: { fallback: false }
}
inline
类型 : Boolean
默认 : false
也可以将工人作为BLOB与 inline 参数
// webpack.config.js
{
loader: 'worker-loader',
options: { inline: true }
}
注意: 内置模式也会为浏览器创建块而不支持
内线工人,要禁用此行为刚刚设定 fallback 参数为
false。 。 。 .
// webpack.config.js
{
loader: 'worker-loader'
options: { inline: true, fallback: false }
}
name
类型 : String
默认 : [hash].worker.js
要设置输出脚本的自定义名称,请使用 name 参数。 名称
可能包含字符串 [hash],将替换为内容依赖
用大麻来拉屎 使用时 name 一个人 [hash] 省略.
// webpack.config.js
{
loader: 'worker-loader',
options: { name: 'WorkerName.[hash].js' }
}
公开
类型 : String
默认 : null
覆盖下载工人脚本的路径. 如未指明, 其他网络包装资产所使用的公共路径.
// webpack.config.js
{
loader: 'worker-loader'
options: { publicPath: '/scripts/workers/' }
}
横跨奥里金
类型 : Boolean
默认 : false
如果您想在CDN和CDN上挂载您的 Javascript 和 工人代码,此操作很有用 只有您已经配置了 publicPath 才有意义 全球网络包装 或本地为 此加载器在您 html 上的不同域上得到服务 .
// **webpack.config.js**
{
loader: 'worker-loader'
options: {
publicPath: 'https://cdn.mysite.fast/',
crossOrigin: true,
}
}
实例
工人文件可以像其它文件一样导入依赖性 :
// 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 已配置 .
// 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 集成, 您需要为您的员工的输出定义自定义模块
// typings/custom.d.ts
declare module "worker-loader!*" {
class WebpackWorker extends Worker {
constructor();
}
export default 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 from "worker-loader!./Worker";
const worker = new Worker();
worker.postMessage({ a: 1 });
worker.onmessage = (event) => {};
worker.addEventListener("message", (event) => {});
跨奥里金政策
WebWorkers
受a的限制
同源政策因此,如果
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 选项
// 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/' }
}
捐款
请花点时间来读一下我们的贡献准则 如果你还没有这样做.