sfcode
An Online Competing and Development Environment
|
Automatically bundle & compile Web Workers within Webpack.
Automatically compiles modules loaded in Web Workers:
The best part? That worker constructor works just fine without bundling turned on, but when bundled the result is supported in all browsers that support Web Workers - all the way back to IE 10!
Workers with fully dynamic URLs, Blob URLs, data URLs or with no ‘{ type:'module’ }` option are left unchanged.
Then drop it into your webpack.config.js:
Note: If you're planning on having more than one worker, you'll need to make sure
output.filename
is set to something dynamic, e.g."[name].bundle.js"
otherwise the generated filenames will overwrite one another.
worker.js: _(our worker module)_
main.js: _(our demo, on the main thread)_
Note: in order to ensure WorkerPlugin bundles your worker, make sure you're passing a string URL/filename to the Worker constructor. WorkerPlugin cannot bundle workers with dynamic/variable filenames, Blob or data URLs - it will leave them unmodified and print a warning during your build.
In most cases, no options are necessary to use WorkerPlugin.
WorkerPlugin will print a warning if your Webpack configuration has output.globalObject
set to window
, since doing so breaks Hot Module Replacement in web workers.
If you're not using HMR and want to disable this warning, pass globalObject:false
:
To configure the value of output.globalObject
for WorkerPlugin's internal Webpack Compiler, set globalObject
to any String:
By default, WorkerPlugin doesn't run any of your configured Webpack plugins when bundling worker code - this avoids running things like html-webpack-plugin
twice. For cases where it's necessary to apply a plugin to Worker code, use the plugins
option.
Here you can specify the names of plugins to "copy" from your existing Webpack configuration, or provide specific plugins to apply only to worker code:
If set to true
, this option enables the bundling of SharedWorker:
If set to false
, this option disables the bundling of [Worker]. Intended to be used with { sharedWorker: true }
to allow bundling of [SharedWorker] only without also bundling [Worker].
Normally, WorkerPlugin will transform ‘new Worker(’./a.js', { type: 'module' })to completely remove the
typeoption, outputting something like
new Worker('a.worker.js')`. This allows the plugin to compile Module Workers to Classic Workers, which are supported in all browsers.
To instead retain ‘{type:'module’}in bundled output, set the
preserveTypeModuleoption to
true`:
Similarly, if you need to have WorkerPlugin output a specific type
value, use the workerType
option to spefify it:
At its core, worker-plugin provides two features: parsing and handling of new Worker()
, and standalone bundling of modules for use in a different JavaScript context.
If all you want is to compile separate bundles for a module, worker-plugin/loader
provides the bundling functionality of worker-plugin as a standalone Webpack loader. This is useful for generating bundles for use in iframes, Service Workers or Worklets. Applying worker-plugin/loader
to an import will bundle that module and return its URL:
Two options are available:
Option | Type | Description |
---|---|---|
name | string | Controls the name of the generated chunk. The name is used to generate a URL according to output.chunkFilename . |
esModule | boolean | Export the URL from an ES Module (export default url ).The default is CommonJS ( module.exports = url ). |
Options can be supplied inline:
... or by setting up a loader alias:
Apache-2.0