{"id":20865,"library":"worker-loader","title":"worker-loader","description":"Webpack loader for bundling Web Workers as separate files or inline blobs. Version 3.0.8 is the latest stable release (Feb 2021). Actively maintained as part of the webpack-contrib ecosystem. Key differentiators: supports inline workers via BLOB to avoid separate HTTP requests, allows customization of worker constructor (Worker/SharedWorker), and provides fine-grained control over filename, publicPath, and esModule output. Requires webpack 4 or 5 and Node >=10.13.","status":"active","version":"3.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/webpack-contrib/worker-loader","tags":["javascript","webpack"],"install":[{"cmd":"npm install worker-loader","lang":"bash","label":"npm"},{"cmd":"yarn add worker-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add worker-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - loader is designed to work with webpack 4 or 5","package":"webpack","optional":true}],"imports":[{"note":"Inline syntax. In webpack 5, using inline loader syntax may cause deprecation warnings; prefer config-based approach.","wrong":"const Worker = require('worker-loader!./Worker.js');","symbol":"worker-loader","correct":"import Worker from 'worker-loader!./Worker.js';"},{"note":"When using config rule for .worker.js files. Since v3, esModule defaults to true, so ESM import is expected.","wrong":"const Worker = require('./file.worker.js');","symbol":"Worker","correct":"import Worker from './file.worker.js';"},{"note":"Set via options.worker: 'SharedWorker' or { type: 'SharedWorker' }. Not imported separately.","wrong":"","symbol":"SharedWorker","correct":"const worker = new SharedWorker();"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.worker\\.js$/,\n        use: { loader: 'worker-loader' }\n      }\n    ]\n  }\n};\n\n// src/app.js\nimport MyWorker from './my.worker.js';\nconst worker = new MyWorker();\nworker.postMessage({ hello: 'world' });\nworker.onmessage = (e) => console.log(e.data);","lang":"javascript","description":"Shows basic webpack config to automatically bundle .worker.js files as Web Workers, and how to import and use the worker in app code."},"warnings":[{"fix":"Replace 'name' with 'filename' in your worker-loader options.","message":"In v3.0.0, the 'name' option was renamed to 'filename'. Using 'name' will cause an error.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Upgrade Node.js to >=10.13 and webpack to >=4.","message":"v3.0.0 dropped support for Node.js < 10.13 and webpack < 4.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use import instead of require, or set options.esModule to false for backward compatibility.","message":"v3.0.0 switched to ES module syntax by default. Old CommonJS imports may break.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use 'inline: 'fallback'' or 'inline: 'no-fallback'' instead of 'fallback'.","message":"v3.0.0 removed the 'fallback' option; replaced by 'inline' option.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use a separate file worker instead of inline, or adjust CSP to allow blob: scripts.","message":"Inline workers (blob) may not work in some CSP (Content Security Policy) environments that restrict blobs.","severity":"gotcha","affected_versions":"*"},{"fix":"Upgrade worker-loader to >=3.0.1.","message":"When using webpack 5 with persistent caching, ensure worker-loader is compatible (fixed in 3.0.1).","severity":"gotcha","affected_versions":"<3.0.1"}],"env_vars":null,"search_vec":"'10.13':72 '2021':24 '3.0.8':17 '4':67 '5':69 'activ':25 'allow':47 'avoid':43 'blob':15,41 'bundl':7 'constructor':51 'contrib':33 'control':58 'custom':48 'differenti':36 'ecosystem':34 'esmodul':63 'feb':23 'file':12 'filenam':60 'fine':56 'fine-grain':55 'grain':57 'http':45 'inlin':14,38 'javascript':73 'key':35 'latest':20 'loader':3,5 'maintain':26 'node':71 'output':64 'part':28 'provid':54 'publicpath':61 'releas':22 'request':46 'requir':65 'separ':11,44 'stabl':21 'support':37 'version':16 'via':40 'web':8 'webpack':4,32,66,74 'webpack-contrib':31 'worker':2,9,39,50 'worker-load':1 'worker/sharedworker':52","created_at":"2026-04-25T11:25:22.923691+00:00","updated_at":"2026-04-25T11:25:22.923691+00:00","problems":[{"fix":"Run 'npm install worker-loader --save-dev'.","cause":"worker-loader is not installed or not in devDependencies.","error":"Module not found: Error: Can't resolve 'worker-loader'"},{"fix":"Change 'name' to 'filename' in worker-loader options.","cause":"Using the old 'name' option which was renamed to 'filename' in v3.","error":"Error: [webpack-cli] Invalid configuration object. webpack has been initialized using a configuration object that does not match the API schema. - configuration.module.rules[0].use has an unknown property 'name'."},{"fix":"Ensure you are using 'import MyWorker from './file.worker.js'' (ESM) and that the file matches the rule pattern.","cause":"The imported module does not export a constructor; likely using wrong import syntax or outdated config.","error":"TypeError: Worker is not a constructor"},{"fix":"Install worker-loader and use correct inline syntax: 'worker-loader!./file.js'.","cause":"Missing dependency or incorrect path in inline loader syntax.","error":"Cannot find module 'worker-loader'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://webpack.js.org/loaders/worker-loader/","github":"https://github.com/webpack-contrib/worker-loader","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/worker-loader","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}