

 

\doxysection*{👩‍🏭 worker-\/plugin}



Automatically bundle \& compile Web Workers within Webpack.\hypertarget{md_sfcode_node_modules_worker_plugin_README_autotoc_md34179}{}\doxysubsubsection{Features}\label{md_sfcode_node_modules_worker_plugin_README_autotoc_md34179}
Automatically compiles modules loaded in Web Workers\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{const worker = new Worker('./foo.js', \{ type: 'module' \});}
\DoxyCodeLine{                          \string^\string^\string^\string^\string^\string^\string^\string^\string^\string^}
\DoxyCodeLine{                          gets bundled using webpack }

\end{DoxyCode}


The best part? That worker constructor works just fine without bundling turned on, but when bundled the result is {\bfseries{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\+:\textquotesingle{}module' \}\`{} option are left unchanged.\hypertarget{md_sfcode_node_modules_worker_plugin_README_autotoc_md34180}{}\doxysubsection{Installation}\label{md_sfcode_node_modules_worker_plugin_README_autotoc_md34180}

\begin{DoxyCode}{0}
\DoxyCodeLine{npm install -\/D worker-\/plugin }

\end{DoxyCode}


Then drop it into your {\bfseries{webpack.\+config.\+js\+:}}


\begin{DoxyCode}{0}
\DoxyCodeLine{+ const WorkerPlugin = require('worker-\/plugin');}
\DoxyCodeLine{}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  <...>}
\DoxyCodeLine{  plugins: [}
\DoxyCodeLine{+    new WorkerPlugin()}
\DoxyCodeLine{  ]}
\DoxyCodeLine{  <...>}
\DoxyCodeLine{\} }

\end{DoxyCode}


\begin{quote}
{\bfseries{Note\+:}} If you\textquotesingle{}re planning on having more than one worker, you\textquotesingle{}ll need to make sure \href{https://webpack.js.org/configuration/output/\#outputfilename}{\texttt{ {\ttfamily output.\+filename}}} is set to something dynamic, e.\+g. {\ttfamily \char`\"{}\mbox{[}name\mbox{]}.\+bundle.\+js\char`\"{}} otherwise the generated filenames will overwrite one another. \end{quote}
\hypertarget{md_sfcode_node_modules_worker_plugin_README_autotoc_md34181}{}\doxysubsection{Usage}\label{md_sfcode_node_modules_worker_plugin_README_autotoc_md34181}
{\bfseries{worker.\+js}}\+: \+\_\+(our worker module)\+\_\+


\begin{DoxyCode}{0}
\DoxyCodeLine{// This is a module worker, so we can use imports (in the browser too!)}
\DoxyCodeLine{import \{ calculatePi \} from './some-\/other-\/module';}
\DoxyCodeLine{}
\DoxyCodeLine{addEventListener('message', event => \{}
\DoxyCodeLine{  postMessage(calculatePi(event.data));}
\DoxyCodeLine{\}); }

\end{DoxyCode}


{\bfseries{main.\+js}}\+: \+\_\+(our demo, on the main thread)\+\_\+


\begin{DoxyCode}{0}
\DoxyCodeLine{const piWorker = new Worker('./worker.js', \{ type: 'module' \});}
\DoxyCodeLine{piWorker.onmessage = event => \{}
\DoxyCodeLine{  console.log('pi: ' + event.data);}
\DoxyCodeLine{\};}
\DoxyCodeLine{piWorker.postMessage(42); }

\end{DoxyCode}


\begin{quote}
{\bfseries{Note\+:}} in order to ensure Worker\+Plugin bundles your worker, make sure you\textquotesingle{}re passing a {\bfseries{string}} URL/filename to the Worker constructor. Worker\+Plugin cannot bundle workers with dynamic/variable filenames, Blob or data URLs -\/ it will leave them unmodified and print a warning during your build. \end{quote}
\hypertarget{md_sfcode_node_modules_worker_plugin_README_autotoc_md34182}{}\doxysubsection{Options}\label{md_sfcode_node_modules_worker_plugin_README_autotoc_md34182}
In most cases, no options are necessary to use Worker\+Plugin.\hypertarget{md_sfcode_node_modules_worker_plugin_README_autotoc_md34183}{}\doxysubsubsection{$<$tt$>$global\+Object$<$/tt$>$ \+\_\+(string $\vert$ false)\+\_\+}\label{md_sfcode_node_modules_worker_plugin_README_autotoc_md34183}
Worker\+Plugin will print a warning if your Webpack configuration has {\ttfamily output.\+global\+Object} set to {\ttfamily window}, since doing so breaks Hot Module Replacement in web workers.

If you\textquotesingle{}re not using HMR and want to disable this warning, pass {\ttfamily global\+Object\+:false}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{new WorkerPlugin(\{}
\DoxyCodeLine{  // disable warnings about "{}window"{} breaking HMR:}
\DoxyCodeLine{  globalObject: false}
\DoxyCodeLine{\}) }

\end{DoxyCode}


To configure the value of {\ttfamily output.\+global\+Object} for Worker\+Plugin\textquotesingle{}s internal Webpack Compiler, set {\ttfamily global\+Object} to any String\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{new WorkerPlugin(\{}
\DoxyCodeLine{  // use "{}self"{} as the global object when receiving hot updates.}
\DoxyCodeLine{  globalObject: 'self' // <-\/-\/ this is the default value}
\DoxyCodeLine{\}) }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_worker_plugin_README_autotoc_md34184}{}\doxysubsubsection{$<$tt$>$plugins$<$/tt$>$ \+\_\+(array)\+\_\+}\label{md_sfcode_node_modules_worker_plugin_README_autotoc_md34184}
By default, Worker\+Plugin doesn\textquotesingle{}t run any of your configured Webpack plugins when bundling worker code -\/ this avoids running things like {\ttfamily html-\/webpack-\/plugin} twice. For cases where it\textquotesingle{}s necessary to apply a plugin to Worker code, use the {\ttfamily plugins} option.

Here you can specify the names of plugins to \char`\"{}copy\char`\"{} from your existing Webpack configuration, or provide specific plugins to apply only to worker code\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  <...>}
\DoxyCodeLine{  plugins: [}
\DoxyCodeLine{    // an example of a plugin already being used:}
\DoxyCodeLine{    new SomeExistingPlugin(\{ <...> \}),}
\DoxyCodeLine{}
\DoxyCodeLine{    new WorkerPlugin(\{}
\DoxyCodeLine{      plugins: [}
\DoxyCodeLine{        // A string here will copy the named plugin from your configuration:}
\DoxyCodeLine{        'SomeExistingPlugin',}
\DoxyCodeLine{        }
\DoxyCodeLine{        // Or you can specify a plugin directly, only applied to Worker code:}
\DoxyCodeLine{        new SomePluginToApplyOnlyToWorkers(\{ <...> \})}
\DoxyCodeLine{      ]}
\DoxyCodeLine{    \})}
\DoxyCodeLine{  ]}
\DoxyCodeLine{  <...>}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_worker_plugin_README_autotoc_md34185}{}\doxysubsubsection{$<$tt$>$shared\+Worker$<$/tt$>$ \+\_\+(boolean)\+\_\+}\label{md_sfcode_node_modules_worker_plugin_README_autotoc_md34185}
If set to {\ttfamily true}, this option enables the bundling of \href{https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker}{\texttt{ Shared\+Worker}}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{const shared = new SharedWorker('./my-\/shared-\/worker.js', \{ type: 'module' \}); }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_worker_plugin_README_autotoc_md34186}{}\doxysubsubsection{$<$tt$>$worker$<$/tt$>$ \+\_\+(boolean)\+\_\+}\label{md_sfcode_node_modules_worker_plugin_README_autotoc_md34186}
If set to {\ttfamily false}, this option disables the bundling of \mbox{[}Worker\mbox{]}. Intended to be used with {\ttfamily \{ shared\+Worker\+: true \}} to allow bundling of \mbox{[}Shared\+Worker\mbox{]} only without also bundling \mbox{[}Worker\mbox{]}.\hypertarget{md_sfcode_node_modules_worker_plugin_README_autotoc_md34187}{}\doxysubsubsection{$<$tt$>$preserve\+Type\+Module$<$/tt$>$ \+\_\+(boolean)\+\_\+}\label{md_sfcode_node_modules_worker_plugin_README_autotoc_md34187}
\hypertarget{md_sfcode_node_modules_worker_plugin_README_autotoc_md34188}{}\doxysubsubsection{$<$tt$>$worker\+Type$<$/tt$>$ \+\_\+(string)\+\_\+}\label{md_sfcode_node_modules_worker_plugin_README_autotoc_md34188}
Normally, Worker\+Plugin will transform `new Worker('./a.js\textquotesingle{}, \{ type\+: \textquotesingle{}module\textquotesingle{} \}){\ttfamily to completely remove the}type{\ttfamily option, outputting something like}new Worker(\textquotesingle{}a.\+worker.\+js\textquotesingle{})\`{}. This allows the plugin to compile Module Workers to Classic Workers, which are supported in all browsers.

To instead retain `\{type\+:\textquotesingle{}module'\}{\ttfamily in bundled output, set the}preserve\+Type\+Module{\ttfamily option to}true\`{}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{plugins: [}
\DoxyCodeLine{  new WorkerPlugin(\{}
\DoxyCodeLine{    preserveTypeModule: true}
\DoxyCodeLine{  \})}
\DoxyCodeLine{] }

\end{DoxyCode}


Similarly, if you need to have Worker\+Plugin output a specific {\ttfamily type} value, use the {\ttfamily worker\+Type} option to spefify it\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{plugins: [}
\DoxyCodeLine{  new WorkerPlugin(\{}
\DoxyCodeLine{    workerType: 'foo'  // note: this isn't a thing!}
\DoxyCodeLine{  \})}
\DoxyCodeLine{] }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_worker_plugin_README_autotoc_md34189}{}\doxysubsection{Loader}\label{md_sfcode_node_modules_worker_plugin_README_autotoc_md34189}
At its core, worker-\/plugin provides two features\+: parsing and handling of {\ttfamily new Worker()}, and standalone bundling of modules for use in a different Java\+Script context.

If all you want is to compile separate bundles for a module, {\ttfamily 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 {\ttfamily worker-\/plugin/loader} to an import will bundle that module and return its URL\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{import workerUrl from 'worker-\/plugin/loader!./my-\/worker';}
\DoxyCodeLine{}
\DoxyCodeLine{console.log(workerUrl); // "{}/0.worker.js"{}}
\DoxyCodeLine{}
\DoxyCodeLine{CSS.paintWorklet.addModule(workerUrl); }

\end{DoxyCode}


Two options are available\+:

\tabulinesep=1mm
\begin{longtabu}spread 0pt [c]{*{3}{|X[-1]}|}
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Option   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-3}
\endfirsthead
\hline
\endfoot
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Option   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-3}
\endhead
{\ttfamily name}   &{\itshape string}   &Controls the name of the generated chunk.~\newline
The name is used to generate a URL according to {\ttfamily output.\+chunk\+Filename}.    \\\cline{1-3}
{\ttfamily es\+Module}   &{\itshape boolean}   &Export the URL from an ES Module ({\ttfamily export default url}).~\newline
The default is Common\+JS ({\ttfamily module.\+exports = url}).   \\\cline{1-3}
\end{longtabu}


Options can be supplied inline\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{import url from 'worker-\/plugin/loader?name=foo\&esModule!./foo'; }

\end{DoxyCode}


... or by setting up a loader alias\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{// webpack.config.js to enable this:}
\DoxyCodeLine{// import url from 'worker!./foo';}
\DoxyCodeLine{\{}
\DoxyCodeLine{  resolveLoader: \{}
\DoxyCodeLine{    alias: \{}
\DoxyCodeLine{      worker: 'worker-\/plugin/loader?esModule'}
\DoxyCodeLine{    \}}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_worker_plugin_README_autotoc_md34190}{}\doxysubsection{License}\label{md_sfcode_node_modules_worker_plugin_README_autotoc_md34190}
Apache-\/2.\+0 