{"id":20860,"library":"webworkify-webpack-dropin","title":"webworkify-webpack","description":"Launches web workers that can use require() in the browser with webpack. Version 1.1.9 is the latest stable release, with no active development. It works by bundling a separate entry point for the worker, allowing Node.js-style module loading inside workers. Compared to alternatives like worker-loader or native worker blob URLs, this library provides a simpler API that mimics the original webworkify but is compatible with webpack's bundling. It is primarily used in webpack-based projects that need inline workers without separate files.","status":"active","version":"1.1.9","language":"javascript","source_language":"en","source_url":"https://github.com/Ambroos/webworkify-webpack","tags":["javascript","web","worker","webworker","background","browser","inline","runtime","webpack"],"install":[{"cmd":"npm install webworkify-webpack-dropin","lang":"bash","label":"npm"},{"cmd":"yarn add webworkify-webpack-dropin","lang":"bash","label":"yarn"},{"cmd":"pnpm add webworkify-webpack-dropin","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The package exports a default function. In CommonJS, require returns the default export directly.","wrong":"const work = require('webworkify-webpack')","symbol":"default","correct":"import work from 'webworkify-webpack'"},{"note":"The argument must be a module reference obtained via require, not a string path. This is required for webpack to bundle the worker module.","wrong":"let w = work('./worker.js')","symbol":"work","correct":"let w = work(require('./worker.js'))"},{"note":"The worker function must be assigned to module.exports. Named functions are recommended to avoid issues with anonymous functions.","wrong":"export default function(self) { ... }","symbol":"module.exports in worker","correct":"module.exports = function worker(self) { ... }"}],"quickstart":{"code":"// main.js\nimport work from 'webworkify-webpack';\n\nlet w = work(require('./worker.js'));\nw.addEventListener('message', event => {\n  console.log(event.data);\n});\nw.postMessage(4);\n\n// worker.js\nimport gamma from 'gamma';\n\nmodule.exports = function worker(self) {\n  self.addEventListener('message', (event) => {\n    const startNum = parseInt(event.data);\n    setInterval(() => {\n      const r = startNum / Math.random() - 1;\n      self.postMessage([startNum, r, gamma(r)]);\n    }, 500);\n  });\n};","lang":"javascript","description":"Demonstrates creating a web worker from a module that uses require() inside the worker, with messaging and a dependency (gamma)."},"warnings":[{"fix":"Set devtool to a non-eval option like 'source-map' or 'cheap-module-source-map'.","message":"webpack devtool with eval configuration breaks the worker generation since version 1.1.0.","severity":"gotcha","affected_versions":">=1.1.0"},{"fix":"Use named functions in module.exports: module.exports = function worker(self) { ... }.","message":"Passing anonymous functions as the worker export can cause issues. Workers may not work correctly in some browsers.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use work(require('./worker.js')) instead of work('./worker.js').","cause":"Using a string path instead of require() in the work() call.","error":"Cannot find module './worker.js'"},{"fix":"Ensure the main script uses require('./worker.js') inside work().","cause":"Worker code is not bundled because the module path is not passed through require().","error":"Uncaught ReferenceError: require is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}