{"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,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","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,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}