title: How do you use Web Workers with Webpack 5?
body: <p>I've been struggling to find the best way to use Web Workers while utilizing Webpack 5 and typescript. I try to follow the <a href="https://webpack.js.org/guides/web-workers/#example" rel="nofollow noreferrer">documentation</a>, however, when I try to create a Web Worker, I am experiencing the following error:</p>
  <pre><code>Uncaught DOMException: Worker constructor: Failed to load worker script at &quot;d:\Project\SeamCarving\js\dist0.bundle.js&quot;
  </code></pre>
  <p>I am not sure why it is trying to access the file from my local system instead of through the development server like: <code>http://localhost:8080/js/dist0.bundle.js</code>.</p>
  <p>Here's the code:</p>
  <pre><code>if (window.Worker) {
      let worker = new Worker(new URL(&quot;./image-worker&quot;, import.meta.url));
  
      worker.onmessage = function (message) {
        return receiveMessage(message);
      };
  
      worker.onerror = function (message) {
        console.log(&quot;ERROR: &quot;, message.error);
        console.log(message.message, message.filename, message.lineno);
      };
  }
  </code></pre>
  <p>webpack.config.js</p>
  <pre><code>const path = require('path');
  
  module.exports = {
    entry: './js/main.ts',
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader',
          include: path.resolve(__dirname, 'js')
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js']
    },
    devtool: 'source-map',
    mode: 'development',
    devServer: {
      contentBase: path.resolve(__dirname, './'),
      publicPath: path.resolve(__dirname, '/js/dist/'),
    },
    output: {
      publicPath: path.resolve(__dirname, &quot;js/dist/&quot;),
      filename: &quot;bundle.js&quot;,
      path: path.resolve(__dirname, 'js/dist'),
    }
  }
  </code></pre>
  <p>All resources I have found so far are using <code>worker-loader</code>, but it's my understanding Webpack 5 makes this obsolete.</p>
  <p>View the full project on <a href="https://github.com/quinnzipse/WebSeamCarver/tree/working_the_web" rel="nofollow noreferrer">GitHub</a>.</p>