Web Workers

webpack 5부터는, worker-loader 없이 Web Workers를 사용할 수 있습니다.

Syntax

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

// 또는 매직 코멘트로 청크 이름을 사용자 정의하세요.
// https://webpack.js.org/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만 사용할 수 있다는 점에 유의하세요.

new Worker()를 사용할 때, Webpack은 패키지의 exports 필드에 정의된 내보내기 조건 이름을 통해 워커 모듈을 찾을 수 있습니다. 이를 통해 패키지는 워커별 버전의 모듈을 자동으로 제공할 수 있습니다.

package.json (종속성 패키지에서):

{
  "name": "my-package",
  "exports": {
    ".": {
      "worker": "./index.worker.js",
      "default": "./index.js"
    }
  }
}

워커 컨텍스트 내에서 이 패키지를 임포트할 때:

// Inside a worker file
import { someFunction } from "my-package";

Webpack은 모듈을 워커 컨텍스트에서 사용할 경우 별도의 설정 없이 자동으로 index.worker.js로 해석합니다.

Example

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

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

Set a public path from a variable

변수에서 __webpack_public_path__를 설정하고 publicPath를 auto로 설정하면, 워커 청크는 별도의 런타임을 갖게 되고, Webpack 런타임은 publicPath를 자동으로 계산된 공개 경로로 설정합니다. 이는 예상과 다를 수 있습니다.

이 문제를 해결하려면 워커 코드 내에서 __webpack_public_path__를 설정해야 합니다. 예시는 다음과 같습니다.

worker.js

globalThis.onmessage = ({ data: { publicPath, ...otherData } }) => {
  if (publicPath) {
    __webpack_public_path__ = publicPath;
  }

  // 나머지 워커 코드
};

app.js

const worker = new Worker(new URL("./worker.js", import.meta.url));

worker.postMessage({ publicPath: globalThis.__MY_GLOBAL_PUBLIC_PATH_VAR__ });

When to use this:

이 패턴은 워커가 추가 청크를 로드해야 하고 자산 기본 URL이 런타임에 결정되는 경우(예: CDN 또는 다중 도메인 배포 사용 시)에만 필요합니다.

워커는 격리된 전역 범위에서 실행되므로 자동으로 감지된 공개 경로가 메인 스레드에서 사용하는 경로와 다를 수 있습니다. 이러한 경우 공개 경로(__webpack_public_path__)를 워커에 명시적으로 전달하고 워커 런타임 내에서 설정해야 합니다.

참고: 이는 고급 사용 사례입니다. 워커가 추가 청크를 로드하지 않거나 자산이 정적 동일 출처 경로에서 제공되는 경우 일반적으로 __webpack_public_path__를 수동으로 설정할 필요가 없습니다.

Node.js

이 섹션에서는 worker_threads 모듈을 통해 Node.js 환경에서 웹 워커를 사용하는 방법을 설명합니다.

비슷한 구문이 12.17.0 이상의 Node.js에서 지원됩니다.

import { Worker } from "node:worker_threads";

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

이 구문은 ESM에서만 사용할 수 있습니다. CommonJS 구문의 Worker는 webpack 이나 Node.js 모두 지원되지 않습니다.