How to handle Web Workers “standard” syntax with webpack?

You can configure Webpack to pack your worker js file into a separate bundle. In webpack.config.js:

{
  entry: {
    bundle: './app/main.js',
    worker: './app/my-worker-file.js'
  },
  output: {
    filename: '[name].js'
  }
  ...
}

This way you get two bundles: bundle.js with your main application and worker.js with the worker entrypoint. Then, inside your main bundle, you can do new Worker('worker.js')

worker-loader basically does the same. Whenever something is loaded through it, it creates a separate bundle entry, so to speak, which is automatically named [hash].worker.js. It then stores this file name into the function that is returned from require('worker!...'), which just passes it to new Worker. At the end, it’s exactly the same process as I’ve described above with the only difference that the name of the bundle is managed automatically for you.