{"id":15026448,"url":"https://github.com/googlechromelabs/worker-plugin","last_synced_at":"2025-05-14T01:06:02.312Z","repository":{"id":50919503,"uuid":"149313373","full_name":"GoogleChromeLabs/worker-plugin","owner":"GoogleChromeLabs","description":"👩‍🏭 Adds native Web Worker bundling support to Webpack.","archived":false,"fork":false,"pushed_at":"2021-05-27T18:48:43.000Z","size":128,"stargazers_count":1918,"open_issues_count":26,"forks_count":79,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-04-03T06:05:44.148Z","etag":null,"topics":["web-worker","webpack","webpack-plugin","webworker","workers"],"latest_commit_sha":null,"homepage":"https://npm.im/worker-plugin","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GoogleChromeLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-18T15:45:18.000Z","updated_at":"2025-03-21T06:48:03.000Z","dependencies_parsed_at":"2022-09-05T20:21:00.440Z","dependency_job_id":null,"html_url":"https://github.com/GoogleChromeLabs/worker-plugin","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fworker-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fworker-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fworker-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fworker-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GoogleChromeLabs","download_url":"https://codeload.github.com/GoogleChromeLabs/worker-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248202002,"owners_count":21064244,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["web-worker","webpack","webpack-plugin","webworker","workers"],"created_at":"2024-09-24T20:04:29.419Z","updated_at":"2025-04-10T10:47:43.966Z","avatar_url":"https://github.com/GoogleChromeLabs.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/MlrAQjl.jpg\" width=\"1000\" alt=\"worker-plugin\"\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e👩‍🏭 worker-plugin\u003c/h1\u003e\n\u003cp align=\"center\"\u003eAutomatically bundle \u0026 compile Web Workers within Webpack.\u003c/p\u003e\n\n\n### Features\n\nAutomatically compiles modules loaded in Web Workers:\n\n```js\nconst worker = new Worker('./foo.js', { type: 'module' });\n                          ^^^^^^^^^^\n                          gets bundled using webpack\n```\n\nThe best part? That worker constructor works just fine without bundling turned on, but when bundled the result is **supported in all browsers** that support Web Workers - all the way back to IE 10!\n\nWorkers with fully dynamic URLs, Blob URLs, data URLs or with no `{ type:'module' }` option are left unchanged.\n\n\u003e _**Compatibility Note:** Webpack 5 now includes worker bundling. It uses a slightly different syntax:_\u003cbr\u003e\n\u003e _`new Worker(new URL(\"./my_worker.js\", import.meta.url))`_\n\n## Installation\n\n```sh\nnpm install -D worker-plugin\n```\n\nThen drop it into your **webpack.config.js:**\n\n```diff\n+ const WorkerPlugin = require('worker-plugin');\n\nmodule.exports = {\n  \u003c...\u003e\n  plugins: [\n+    new WorkerPlugin()\n  ]\n  \u003c...\u003e\n}\n```\n\n\u003e **Note:** If you're planning on having more than one worker, you'll need to make sure [`output.filename`](https://webpack.js.org/configuration/output/#outputfilename) is set to something dynamic, e.g. `\"[name].bundle.js\"` otherwise the generated filenames will overwrite one another. \n\n## Usage\n\n**worker.js**: _(our worker module)_\n\n```js\n// This is a module worker, so we can use imports (in the browser too!)\nimport { calculatePi } from './some-other-module';\n\naddEventListener('message', event =\u003e {\n  postMessage(calculatePi(event.data));\n});\n```\n\n**main.js**: _(our demo, on the main thread)_\n\n```js\nconst piWorker = new Worker('./worker.js', { type: 'module' });\npiWorker.onmessage = event =\u003e {\n  console.log('pi: ' + event.data);\n};\npiWorker.postMessage(42);\n```\n\n\u003e **Note:** in order to ensure WorkerPlugin bundles your worker, make sure you're passing a **string** URL/filename to the Worker constructor. WorkerPlugin cannot bundle workers with dynamic/variable filenames, Blob or data URLs - it will leave them unmodified and print a warning during your build.\n\n## Options\n\nIn most cases, no options are necessary to use WorkerPlugin.\n\n### `globalObject` _(string | false)_\n\nWorkerPlugin will print a warning if your Webpack configuration has `output.globalObject` set to `window`, since doing so breaks Hot Module Replacement in web workers.\n\nIf you're not using HMR and want to disable this warning, pass `globalObject:false`:\n\n```js\nnew WorkerPlugin({\n  // disable warnings about \"window\" breaking HMR:\n  globalObject: false\n})\n```\n\nTo configure the value of `output.globalObject` for WorkerPlugin's internal Webpack Compiler, set `globalObject` to any String:\n\n```js\nnew WorkerPlugin({\n  // use \"self\" as the global object when receiving hot updates.\n  globalObject: 'self' // \u003c-- this is the default value\n})\n```\n\n### `plugins` _(array)_\n\nBy default, WorkerPlugin doesn't run any of your configured Webpack plugins when bundling worker code - this avoids running things like `html-webpack-plugin` twice. For cases where it's necessary to apply a plugin to Worker code, use the `plugins` option.\n\nHere you can specify the names of plugins to \"copy\" from your existing Webpack configuration, or provide specific plugins to apply only to worker code:\n\n```js\nmodule.exports = {\n  \u003c...\u003e\n  plugins: [\n    // an example of a plugin already being used:\n    new SomeExistingPlugin({ \u003c...\u003e }),\n\n    new WorkerPlugin({\n      plugins: [\n        // A string here will copy the named plugin from your configuration:\n        'SomeExistingPlugin',\n        \n        // Or you can specify a plugin directly, only applied to Worker code:\n        new SomePluginToApplyOnlyToWorkers({ \u003c...\u003e })\n      ]\n    })\n  ]\n  \u003c...\u003e\n}\n```\n\n### `sharedWorker` _(boolean)_\n\nIf set to `true`, this option enables the bundling of [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker):\n\n```js\nconst shared = new SharedWorker('./my-shared-worker.js', { type: 'module' });\n```\n\n### `worker` _(boolean)_\n\nIf set to `false`, this option disables the bundling of [Worker]. Intended to be used with `{ sharedWorker: true }` to allow bundling of [SharedWorker] only without also bundling [Worker].\n\n### `preserveTypeModule` _(boolean)_\n### `workerType` _(string)_\n\nNormally, WorkerPlugin will transform `new Worker('./a.js', { type: 'module' })` to completely remove the `type` option, outputting something like `new Worker('a.worker.js')`. This allows the plugin to compile Module Workers to Classic Workers, which are supported in all browsers.\n\nTo instead retain `{type:'module'}` in bundled output, set the `preserveTypeModule` option to `true`:\n\n```js\n  plugins: [\n    new WorkerPlugin({\n      preserveTypeModule: true\n    })\n  ]\n```\n\nSimilarly, if you need to have WorkerPlugin output a specific `type` value, use the `workerType` option to specify it:\n\n```js\n  plugins: [\n    new WorkerPlugin({\n      workerType: 'foo'  // note: this isn't a thing!\n    })\n  ]\n```\n\n## Loader\n\nAt its core, worker-plugin provides two features: parsing and handling of `new Worker()`, and standalone bundling of modules for use in a different JavaScript context.\n\nIf all you want is to compile separate bundles for a module, `worker-plugin/loader` provides the bundling functionality of worker-plugin as a standalone Webpack loader. This is useful for generating bundles for use in iframes, Service Workers or Worklets. Applying `worker-plugin/loader` to an import will bundle that module and return its URL:\n\n```js\nimport workerUrl from 'worker-plugin/loader!./my-worker';\n\nconsole.log(workerUrl); // \"/0.worker.js\"\n\nCSS.paintWorklet.addModule(workerUrl);\n```\n\nTwo options are available:\n\n| Option | Type | Description\n|---|---|:--|\n| `name` | _string_ | Controls the name of the generated chunk.\u003cbr\u003eThe name is used to generate a URL according to  `output.chunkFilename`.\n| `esModule` | _boolean_ | Export the URL from an ES Module (`export default url`).\u003cbr\u003eThe default is CommonJS (`module.exports = url`).\n\nOptions can be supplied inline:\n\n```js\nimport url from 'worker-plugin/loader?name=foo\u0026esModule!./foo';\n```\n\n... or by setting up a loader alias:\n\n```js\n// webpack.config.js to enable this:\n// import url from 'worker!./foo';\n{\n  resolveLoader: {\n    alias: {\n      worker: 'worker-plugin/loader?esModule'\n    }\n  }\n}\n```\n\n\n## License\n\nApache-2.0\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglechromelabs%2Fworker-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglechromelabs%2Fworker-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglechromelabs%2Fworker-plugin/lists"}