Web Workers | webpack

As of webpack 5, you can use Web Workers without worker-loader.
The syntax was chosen to allow running code without bundler, it is also available in native ECMAScript modules in the browser.
Note that while the Worker API suggests that Worker constructor would accept a string representing the URL of the script, in webpack 5 you can only use URL instead.
When using new Worker(), webpack can resolve worker modules by export condition names defined in the package's exports field. This allows packages to provide worker-specific versions of modules automatically.
package.json (in a dependency package):
When you import this package inside a worker context:
Webpack will automatically resolve to index.worker.js when the module is used in a worker context, without requiring any additional configuration.
Using a variable in the Worker constructor is not supported by webpack. For example, the following code will not work: const url = new URL('./path/to/worker.ts', import.meta.url); const worker = new Worker(url);. This is because webpack cannot analyse the syntax statically. It is important to be aware of this limitation when using Worker syntax with webpack.
When you set __webpack_public_path__ from a variable, and use publicPath equal to auto, worker chunks will get a separate runtime, and Webpack runtime will set publicPath to automatically calculated public path, that is probably is not what you expect.
To work around this issue, you need to set __webpack_public_path__ from within the worker code. Here is an example:
This pattern is only required when a worker needs to load additional chunks and the asset base URL is determined at runtime (for example, when using a CDN or a multi-domain deployment).
Since workers run in an isolated global scope, the automatically detected public path may differ from the one used by the main thread. In such cases, the public path (__webpack_public_path__) must be explicitly passed to the worker and set inside the worker runtime.
Note: This is an advanced use case. If your worker does not load additional chunks or your assets are served from a static, same-origin path, you typically do not need to set __webpack_public_path__ manually.
This section describes using Web Workers in a Node.js environment via the worker_threads module.
Similar syntax is supported in Node.js (>= 12.17.0):
Note that this is only available in ESM. Worker in CommonJS syntax is not supported by either webpack or Node.js.
Copyright OpenJS Foundation and webpack contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy