title: How can I package a WebWorker for use in a portable library?
body: <p>I have a library package that provides some hooks which in turn do some expensive calculation on worker threads:</p>
  <pre><code>// example/App.tsx
  
  import {useFancyPants} from '@fancy-pants/hooks';
  
    ...
    useFancyPants(&quot;kittens&quot;); // Help! I need to call a worker thread
    ...
  </code></pre>
  <pre><code>// fancy-pants/src/hooks.ts
  
  export function useFancyPants() {
     const worker = new Worker(new URL('../worker/fancy.ts', import.meta.url));
     worker.sendMessage(...);
     worker.onMessage(...);
  }
  </code></pre>
  <pre><code>// fancy-pants/src/worker/fancy.ts
  
  self.onMessage(...);
  </code></pre>
  <pre><code>// fancy-pants/src/index.tsx
  
  import React from 'react';
  import ReactDOM from 'react-dom';
  
  import Demo from './Demo';
  
  ReactDOM.render(&lt;Demo /&gt;, document.getElementById('root'));
  </code></pre>
  <pre><code>// fancy-pants/src/Demo.tsx
  Demo.tsx
  
  import {useFancyPants} from './hooks'
  
    ...
    useFancyPants(&quot;rainbows&quot;)
    ...
  </code></pre>
  <pre><code>// fancy-pants/webpack.config.js
  
  const path = require(&quot;path&quot;)
  
  module.exports = {
      entry: &quot;./src/Demo.tsx&quot;,
      output: {
          filename: &quot;fancy.js&quot;,
          path: path.join(__dirname, &quot;./dist/&quot;),
      },
      resolve: {
          extensions: [&quot;.ts&quot;, &quot;.tsx&quot;, &quot;.js&quot;],
          modules: [&quot;node_modules&quot;]
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: [&quot;babel-loader&quot;],
              },
              {
                  test: /\.tsx?$/,
                  exclude: /node_modules/,
                  use: [&quot;ts-loader&quot;],
              },
          ],
      },
  }
  </code></pre>
  <p>Inside <code>fancy-pants</code>, the <code>Demo</code> app works correctly. Webpack compiles the worker <code>fancy-pants/worker/fancy.ts</code> to <code>fancy-pants/dist/src_worker_fancy.worker.js</code>, where it's available to the <code>new Worker(new URL('../worker/fancy.ts', import.meta.url));</code> code (even though it's not in the <code>fancy-pants/public/</code> folder ... this is a deeper magic I don't understand). There's a bit more config required to wire all this together but I'm trying to keep this example as simple as possible.</p>
  <p>What is the best way to make the <code>useFancyPants</code> hook work from a <em>different</em> package, i.e. <code>example/App.tsx</code>? I.e., when I import and use <code>useFancyPants</code> inside my <code>example</code> app, how does it bundle and then talk to a worker thread? Ideally I would prefer not to have to manually compile and save the <code>fancy-pants</code> worker to <code>example/public</code>, though I suppose that's an option. (Note that I'm in a monorepo, if that helps, though ideally I would like <code>fancy-pants</code> to be a package importable and usable from anywhere.)</p>