Web Workers

webpack 5から、Web Workersをworker-loaderなしで使用できます。

構文

new Worker(new URL('./worker.js', import.meta.url));

// or customize the chunk name with magic comments
// see https://webpack.dokyumento.jp/api/module-methods/#magic-comments
new Worker(
  /* webpackChunkName: "foo-worker" */ new URL('./worker.js', import.meta.url)
);

この構文は、バンドラーなしでコードを実行できるように選択されました。また、ブラウザのネイティブECMAScriptモジュールでも利用できます。

Worker APIは、WorkerコンストラクタがスクリプトのURLを表す文字列を受け入れることを示唆していますが、webpack 5では代わりにURLのみを使用できることに注意してください。

例

src/index.js

const worker = new Worker(new URL('./deep-thought.js', import.meta.url));
worker.postMessage({
  question:
    'The Answer to the Ultimate Question of Life, The Universe, and Everything.',
});
worker.onmessage = ({ data: { answer } }) => {
  console.log(answer);
};

src/deep-thought.js

self.onmessage = ({ data: { question } }) => {
  self.postMessage({
    answer: 42,
  });
};

Node.js

同様の構文がNode.js（> = 12.17.0）でサポートされています

import { Worker } from 'worker_threads';

new Worker(new URL('./worker.js', import.meta.url));

これはESMでのみ利用可能であることに注意してください。CommonJS構文でのWorkerは、webpackまたはNode.jsのいずれでもサポートされていません。