{"id":20866,"library":"worker-plugin","title":"worker-plugin","description":"Webpack plugin that automatically bundles and compiles Web Workers (including SharedWorkers) integrated into your build. Version 5.0.1 supports both Webpack 4 and 5, with fixes for malformed options objects. It simplifies worker usage by allowing standard `new Worker('./worker.js', { type: 'module' })` syntax, which works without bundling but becomes universally compatible when bundled. Unlike Webpack 5's built-in worker support (which uses `new URL` syntax), worker-plugin uses the more traditional approach and adds SharedWorker support. It does not require runtime changes and supports ESM modules in workers.","status":"active","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/GoogleChromeLabs/worker-plugin","tags":["javascript","webpack","plugin","worker","web worker","thread"],"install":[{"cmd":"npm install worker-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add worker-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add worker-plugin","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"CommonJS require is the default and recommended usage. ESM import is not supported by the package.","wrong":"import WorkerPlugin from 'worker-plugin';","symbol":"WorkerPlugin","correct":"const WorkerPlugin = require('worker-plugin');"},{"note":"If using ESM, the default import works as the package exports a single function. Do not try to use .default with CommonJS.","wrong":"const WorkerPlugin = require('worker-plugin').default;","symbol":"WorkerPlugin (ESM)","correct":"import WorkerPlugin from 'worker-plugin';"},{"note":"TypeScript users should use default import for type inference. The package provides types.","wrong":"const WorkerPlugin = require('worker-plugin');","symbol":"WorkerPlugin (TypeScript)","correct":"import WorkerPlugin from 'worker-plugin';"}],"quickstart":{"code":"const WorkerPlugin = require('worker-plugin');\n\n// webpack.config.js\nmodule.exports = {\n  output: {\n    filename: '[name].bundle.js'\n  },\n  plugins: [\n    new WorkerPlugin()\n  ]\n};\n\n// In your application code:\n// worker.js\nself.addEventListener('message', event => {\n  self.postMessage('Hello from worker');\n});\n\n// main.js\nconst worker = new Worker('./worker.js', { type: 'module' });\nworker.onmessage = event => console.log(event.data);\nworker.postMessage('');","lang":"javascript","description":"Shows basic setup: install worker-plugin, add to webpack config, create a simple worker module and invoke it from main thread."},"warnings":[{"fix":"Use the 'plugins' option to specify which plugins to apply to workers, e.g., new WorkerPlugin({ plugins: ['SomePlugin'] })","message":"In v3.0.0, plugins are no longer inherited by default. You must explicitly pass plugins via the 'plugins' option if you need them in worker compilation.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Evaluate whether to migrate to Webpack 5's built-in worker support or continue using this plugin.","message":"Webpack 5 now includes built-in worker bundling. worker-plugin is still useful for SharedWorker support and simpler syntax, but consider migrating to Webpack 5's native support using `new Worker(new URL('./worker.js', import.meta.url))`.","severity":"deprecated","affected_versions":">=5.0.0"},{"fix":"Ensure you always pass a static string filename and { type: 'module' } option to the Worker constructor.","message":"WorkerPlugin only bundles workers with string URL/filename arguments. Dynamic URLs, Blob URLs, data URLs, or not providing { type: 'module' } will leave the worker unmodified and print a warning.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set output.filename to a dynamic pattern like '[name].bundle.js' to give each worker a unique filename.","message":"If output.filename is set to a static name (e.g., 'bundle.js'), multiple workers will overwrite each other's output files.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Either avoid setting globalObject to 'window' or pass globalObject: false to WorkerPlugin to suppress the warning.","message":"Setting output.globalObject to 'window' (common for web targets) breaks Hot Module Replacement in workers. WorkerPlugin will emit a warning.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure the worker filename is a string literal and the path is relative to the current module. For TypeScript, use .ts extension: new Worker('./worker.ts', { type: 'module' })","cause":"The worker file path is incorrect or not handled by webpack loaders.","error":"Error: Module not found: Error: Can't resolve './worker.js'"},{"fix":"Double-check that you are using the exact syntax: new Worker('./path.js', { type: 'module' }). Dynamic variables or missing module type will not be bundled.","cause":"The plugin did not detect any Worker constructor calls with string arguments and { type: 'module' }.","error":"Warning: WorkerPlugin: No workers found. Ensure you are using `new Worker(fileURL)` syntax with a string argument."},{"fix":"Upgrade to webpack 5 or disable sharedWorker option in WorkerPlugin.","cause":"SharedWorker support requires webpack 5.","error":"Error: WorkerPlugin: SharedWorker is not supported in this version of Webpack"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}