title: How to configure webpack 5 to bundle the module Web Worker script correctly which imports other modules?
body: <p>As per the documentation, I am not using <code>worker-loader</code>, I am trying to use the native way suggested by the <a href="https://webpack.js.org/guides/web-workers/" rel="nofollow noreferrer">webpack-5 documentation</a>.</p>
  <p>Below is the <strong>usage of the worker script</strong> in the main thread.</p>
  <pre class="lang-js prettyprint-override"><code>const worker = new window.Worker(
      new URL(&quot;../workers/listOperation.worker.js&quot;, import.meta.url),
      {
          type: &quot;module&quot;,
      },
  );
  worker.postMessage({ list: hugeList, params: reqData });
  worker.onerror = err =&gt; console.error(err);
  worker.onmessage = e =&gt; {
      const { list } = e.data;
      // Usage of `list` from the response
      worker.terminate();
  };
  return worker;
  </code></pre>
  <p><em>It works fine if there are no imports used in the script. But when I import any node modules (e.g. <code>loadash/get</code>) or any other function/constants from local, it does not work as the output webWorker bundle file doesn't transpile and bundle the imported code. It keeps the &quot;import&quot; statement as it is.</em></p>
  <p>Below is the worker script (<code>listOperation.worker.js</code>)</p>
  <pre class="lang-js prettyprint-override"><code>import get from &quot;lodash/get&quot;;
  import { ANY_CONSTANT } from &quot;../constants&quot;; // This is some local constant
  
  addEventListener(&quot;message&quot;, e =&gt; {
      const { list, params } = e.data;
      
      // Here I have some usage of `get` method from `lodash/get` and ANY_CONSTANT
      
      self.postMessage({
          list: list,
      });
  });
  </code></pre>
  <p>Webpack outputs the bundle file like below which won't be usable by the browser, if I put the <code>/\.worker.js$/</code> pattern in the the <code>exclude</code> of <code>babel-loader</code> rule.</p>
  <pre class="lang-js prettyprint-override"><code>import get from &quot;lodash/get&quot;;import{ANY_CONSTANT}from&quot;../constants&quot;;addEventListener(&quot;message&quot;,(e=&gt;{const{list:s,params:t,.......
  </code></pre>
  <p>And even if I don't put the <code>/\.worker.js$/</code> pattern in the the <code>exclude</code> of <code>babel-loader</code> rule, the output bundle still doesn't include the implementation of <code>get</code> from <code>lodash/get</code> or the value of the constant. It just outputs it in cjs using <code>require</code>.</p>
  <p>Also, I made use of asset module so that I can put the output file inside a directory, not directly in the root of the <code>dist</code> folder. Configuration changes in my webpack.config looks like this.</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
      entry: {...},
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: [/(node_modules)/, /\.worker.js$/],
                  use: {
                      loader: &quot;babel-loader&quot;, // This uses the config defined in babel.config.js
                  },
              },
              {
                  test: /\.worker.js$/,
                  exclude: /(node_modules)/,
                  type: &quot;asset/resource&quot;,
                  generator: {
                      filename: &quot;js/workers/[hash][ext][query]&quot;,
                  },
              },
          ],
      },
  }
  </code></pre>