worker-loader

开源

一个 webpack 加载器,它将脚本注册为 Web Worker

1.5K stars0 点赞3 次浏览

工具介绍

一个 webpack 加载器,它将脚本注册为 Web Worker

[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url] [![测试][tests]][tests-url] [![coverage][cover]][cover-url] [![聊天][chat]][chat-url] [![size][size]][size-url]

worker-loader

v5 中已过时: https://webpack.js.org/guides/web-workers/ 用于 webpack 4 的 Web Worker 加载器请注意,此处仅针对 webpack 4。若要在 webpack 5 中使用 Web Workers,请参阅 https://webpack.js.org/guides/web-workers/.

开始使用

首先,您需要安装 worker-loader:

bash

$ npm install worker-loader --save-dev

置入

App.js

javascript

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

配置

webpack.config.js

javascript

module.exports = {
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: "worker-loader" },
      },
    ],
  },
};

App.js

javascript

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

const worker = new Worker();

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

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

然后使用您喜欢的方法运行 webpack。

选项

名称	类型	默认值	描述
`worker`	`{String\|Object}`	`Worker`	允许设置 Web 工作者构造函数名称和选项
`publicPath`	`{String\|Function}`	基于 `output.publicPath`	指定输出文件在浏览器中引用时的公共 URL 地址
`filename`	`{String\|Function}`	基于 `output.filename`	Web 工作者入口分块的文件名
`chunkFilename`	`{String}`	基于 `output.chunkFilename`	非入口分块的文件名